Coffeescript Three.js摄像机旋转问题

我想在查看

（0,0,0）

点的同时，在y-z平面上绕x轴旋转相机。原来

lookAt

函数的行为很奇怪。旋转180°后，几何体意外跳到另一侧。你能解释一下为什么会发生这种情况，以及如何避免这种情况吗

您可以在JSFIDLE上看到实时演示：

---

您正在Y-Z平面中围绕X轴旋转摄影机。当相机经过“北极”和“南极”时，它会翻转以保持右侧朝上。相机的上方向向量默认为

（0，1，0）

将摄影机的x位置设置为100，这样，其行为将在您看来是正确的。将一些轴添加到演示中以获得参考框架

这不是图书馆的过错。查看

Camera.lookAt（）

源代码

如果要改为通过相机的四元数设置相机方向，可以这样做

---

three.js r.59

您可能遇到了万向节锁问题（您可以在网上进行研究）。解决方案是使用四元数旋转代替（也可研究）。请注意，最新的Three.js、r59现在默认使用四元数，Object3D中提供了一些新的旋转方法（rotateX（）、rotateAroundAxis（）和friends）。您确定这是万向节锁问题吗？问题是我不知道

lookAt

函数的机制。为什么团队不在

lookAt

函数中使用四元数呢？我读了源代码。谢谢，这很有帮助。three.js的文档误导了我的想法。我给了x位置一个偏移量，但同样的问题似乎有助于你理解发生了什么，将相机偏移量设置为200，然后设置为50，然后设置为20。一切都正常运转——相机避免倒置。如果您不在乎摄像头是否倒置，请使用

轨迹球控件

控制您的摄像头。

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