Question

我创建了一个带圆柱几何体的圆锥体。然后当我想用lookAt函数旋转圆锥指向X轴的正方向时，它就不起作用了。我的代码有什么问题吗？或者这是Three.js的错误？

您还可以在jsFiddle上查看我的代码：http://jsfiddle.net/ysmood/CRdxP/

class Stage
    constructor: ->
        @init_scene()
        @make_meshes()

    init_scene: ->
        @scene = new THREE.Scene

        # Renderer
        width = window.innerWidth;
        height = window.innerHeight;
        @renderer = new THREE.WebGLRenderer({
            canvas: document.querySelector('.scene')
        })
        @renderer.setSize(width, height)

        # Camera
        @camera = new THREE.PerspectiveCamera(
            45,                 # fov
            width / height,     # aspect
            1,                  # near
            1000                # far
        )
        @camera.position.z = 200;
        @scene.add(@camera)

    make_meshes: ->
        size = 20
        @mesh = new THREE.Mesh(
            new THREE.CylinderGeometry(
                0, size, size
            ),
            new THREE.MeshNormalMaterial()
        )
        @scene.add(@mesh)

        # I want the mesh's tip point to right, but it doesn't work.
        @mesh.lookAt(new THREE.Vector3(1, 0, 0))

    draw: =>
        @renderer.render(@scene, @camera)

stage = new Stage
stage.draw()

Answer 1

默认情况下，所有网格都将lookAt向量设置为(0,0,1)，将up向量设置为(0,1,0)。通过将lookAt向量设置为(1,0,0)，您几乎可以围绕y轴将网格旋转90度。

看看这个演示：http://threejs.org/examples/misc_lookat.html

你会找到

geometry.applyMatrix( new THREE.Matrix4().makeRotationFromEuler( new THREE.Vector3( Math.PI / 2, Math.PI, 0 ) ) );

该命令以这样的方式修改几何体，即锥体的尖端现在沿着z轴放置，之后它使用mesh.lookAt(someVector)重新定向网格以查看空间中的某个所需点。

希望这有帮助。

Answer 2

我自己遇到了camera.up矢量这个问题，所以我编写了自己的lookAt函数，它没有使用向上矢量。它只是将摄像机指向目标位置，保持其当前的滚动状态。

CameraUtils.lookAt = function(camera, targetPosition) {
    var targetPos = camera.worldToLocal(targetPosition.clone());
    var rotationAxis = new THREE.Vector3().crossVectors(
        new THREE.Vector3(0, 0, -1),
        targetPos
    ).normalize();
    var angle = new THREE.Vector3(0, 0, -1).angleTo(
        targetPos.normalize().clone());

    camera.rotateOnAxis(rotationAxis, angle);
}

这样称呼：

CameraUtils.lookAt(camera, myObject.position);

我希望它有所帮助。

Three.js，lookAt函数问题

2 个答案: