Three.js 相机旋转问题

Question

我想在查看(0, 0, 0) 点的同时，在 y-z 平面上围绕 x 轴旋转相机。原来lookAt 函数的行为很奇怪。旋转 180° 后，几何图形意外跳到另一侧。您能否解释一下为什么会发生这种情况，以及如何避免这种情况？

您可以在 jsFiddle 上查看现场演示：http://jsfiddle.net/ysmood/dryEa/

class Stage
    constructor: ->
        window.requestAnimationFrame = 
            window.requestAnimationFrame or
            window.webkitRequestAnimationFrame or
            window.mozRequestAnimationFrame

        @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
        )
        @scene.add(@camera)

    make_meshes: ->
        size = 20
        num = 1

        geo = new THREE.CylinderGeometry(0, size, size)
        material = new THREE.MeshNormalMaterial()
        mesh = new THREE.Mesh(geo, material)
        mesh.rotation.z = Math.PI / 2

        @scene.add(mesh)

    draw: =>
        angle = Date.now() * 0.001
        radius = 100

        @camera.position.set(
            0,
            radius * Math.cos(angle),
            radius * Math.sin(angle)
        )
        @camera.lookAt(new THREE.Vector3())

        @renderer.render(@scene, @camera)
        requestAnimationFrame(@draw)

stage = new Stage
stage.draw()

Answer 1

您正在围绕 Y-Z 平面中的 X 轴旋转相机。当相机经过“北极”和“南极”时，它会翻转以保持正面朝上。相机的上矢量默认为(0, 1, 0)。

将相机的 x 位置设置为 100，这样它的行为对您来说是正确的。将一些轴添加到您的演示中以作为参考框架。

这不是图书馆的错。看看Camera.lookAt() 源代码。

如果您想通过四元数设置相机方向，您可以这样做。

three.js r.59