2

FlyControls に似たものを THREE.js に実装しようとしていますが、カメラのピッチを正しく回転させる方法を一生理解できません。

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

どんな助けでも大歓迎です！

4

2 に答える 2

3

THREE.js IRC チャンネルの親切なユーザーは、私がやりたかったことを達成する最も簡単な方法は、カメラを別のオブジェクト (親/コンテナー) でラップすることだと説明してくれました。平行移動とヨーはコンテナに適用され、ピッチはカメラ自体に適用されます。

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。これには、シーンに対してではなく、ブームに対してカメラを回転させる効果があります。

于 2013-01-17T21:14:53.430 に答える
2

私が行う方法は、最初に を設定することです。次に、ヨーおよびピッチとしてcamera.eulerOrder = "YXZ";使用できます。camera.rotation.ycamera.rotation.x

移動にはcamera.translateZ、前進/後退とcamera.translateX機銃掃射に使用します。プレイヤーが真上/下を見ているときでも常にジャンプアップ (または落下) したいので、(回転に基づく)camera.position.y += velocity.y;の代わりに使用します。translateY

これが代わりにコンテナを使用するよりも良いか悪いかはわかりません。

于 2013-02-28T23:40:11.713 に答える