Three.js相机旋转问题 [英] Three.js camera rotation issue

问题描述

我想在观察（0，0，0）点的同时绕y-z平面上的x轴旋转相机。事实证明 lookAt 函数的行为很奇怪。旋转180°后，几何图形意外跳到另一侧。您能否解释为什么会发生这种情况，以及如何避免这种情况？

I want to rotate the camera around the x-axis on the y-z plane while looking at the (0, 0, 0) point. It turns out the lookAt function behaves weird. When after rotating 180°, the geometry jump to another side unexpectedly. Could you please explain why this happens, and how to avoid it?

您可以在jsFiddle上观看实时演示： http： //jsfiddle.net/ysmood/dryEa/

You can see the live demo on 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()

推荐答案

您正在围绕YZ平面中的X轴旋转相机。当摄像机经过北和南两极时，它会翻转以保持右侧朝上。相机的向上矢量默认为（0，1，0）。

You are rotating the camera around the X-axis in the Y-Z plane. When the camera passes over the "north" and "south" poles, it flips so as to stay right-side-up. The camera's up-vector is (0, 1, 0) by default.

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

Set the camera x-position to 100 so, and its behavior will appear correct to you. Add some axes to your demo for a frame of reference.

这不是库的错。看看 Camera.lookAt（）源代码。

This is not a fault of the library. Have a look at the Camera.lookAt() source code.

如果要通过设置摄像机方向

If you want to set the camera orientation via its quaternion instead, you can do that.

three.js r.59

three.js r.59

这篇关于Three.js相机旋转问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！