三.js、lookAt函数问题

Question

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

你也可以在 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 函数，它不使用 up 向量。它只是将相机指向目标位置，保持当前滚动。

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);

希望对你有帮助。