three.js - 如何将新的相机旋转与以前的转换组合在一起？

Question

我正在尝试在 THREE.js 中实现类似于 FlyControls 的东西，但我终究无法弄清楚如何正确地旋转相机的俯仰角:

http://radiantjs.herokuapp.com/

按 A 或 Z 键“向上看/向下看”。因为该演示中的初始位置已经在偏航轴上旋转，所以俯仰基本上看起来像滚动。

我更新相机位置和旋转的代码如下:

/**
 * Updates this View. This is called once per frame.
 * 
 * @param {Number} delta The length of the frame (16 / milliseconds).
 */
update: function(delta) {

        if (this.velocity.length() < 0.15) {
            this.velocity.clear()
        } else {
            this.velocity.multiplyScalar(0.85 * delta)
        }

        if (this.velocity.x || this.velocity.y || this.velocity.z) {
            this.camera.position = this.camera.localToWorld(this.velocity.clone())
            this.camera.position.clamp(-16384, 16384)
        }

        if (this.rotation.length() < 0.15) {
            this.rotation.clear()
        } else {
            this.rotation.multiplyScalar(0.85 * delta)
        }

        if (this.rotation.x || this.rotation.y) {
            var rotation = this.rotation.clone().multiplyScalar(Math.PI / 180)
            this.camera.rotation.add(rotation)
        }
    }

完整的代码也可以在这里找到: https://github.com/jdolan/radiantjs/blob/master/public/scripts/main/view.js#L291

非常感谢任何帮助!

Answer 1

THREE.js IRC channel 中一位好心的用户解释说，完成我想做的事情的最简单方法是将相机包装在一个单独的对象(父级/容器)中。平移和偏航应用于容器，而俯仰应用于相机本身:

this.boom = new THREE.Object3D()
this.boom.position.copy(params.position)
this.boom.up.set(0, 0, 1)
this.boom.lookAt(new THREE.Vector3(0, 1, 0).add(params.position))

this.camera = new THREE.PerspectiveCamera(this.fov, this.aspect, 0.1, 4096)

this.boom.add(this.camera)
this.scene.add(this.boom)

然后在每一帧应用我的变换:

if (this.velocity.length() < 0.15) {
    this.velocity.clear()
} else {
    this.velocity.multiplyScalar(0.85)
}

if (this.velocity.x || this.velocity.y || this.velocity.z) {
    this.boom.translate(3, this.velocity.clone())
    this.boom.position.clamp(-16384, 16384)
}

if (this.avelocity.length() < 0.15) {
    this.avelocity.clear()
} else {
    this.avelocity.multiplyScalar(0.85)
}

if (this.avelocity.x || this.avelocity.y) {
    var rotation = this.avelocity.clone().multiplyScalar(Math.PI / 180)
    this.boom.rotation.y += rotation.y
    this.camera.rotation.x += rotation.x
}

工作起来很有魅力!请注意，偏航应用于 this.boom，而俯仰应用于 this.camera。这具有相对于吊杆而不是相对于场景旋转相机的效果。