three.js所拍摄装置旋转问题(Three.js camera rotation issue)

2019-10-30 10:12发布

我想绕X轴相机在YZ平面上,同时寻找在(0, 0, 0)点。 原来, 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:

您正在旋转绕X轴相机在YZ平面。 当相机越过“北方”和“南方”两极,它翻转,这样才能保持右侧向上。 相机的上矢量是(0, 1, 0)由缺省值。

将相机设置为x坐标为100,所以,它的行为会出现正确的给你。 一些轴添加到您的演示了一个参照系。

这不是图书馆的故障。 看一看在Camera.lookAt()的源代码。

如果你想通过设置其四元数摄像机朝向相反,你可以做到这一点。

three.js所r.59



文章来源: Three.js camera rotation issue