Three.js

Question

在我的 three.js 场景中，我可以添加和编辑对象。我最近添加了一个 "Rotate Camera" 复选框，效果很好。但问题是附加到对象的 transformControls 似乎旋转不同：当我停止旋转时，控件与对象相比发生了位移。这是我的功能：

function optionCameraRotation() {
        "use strict";
        return {
            ROTATION_Y_AXIS : false
        };
    }
    var rotationOption = optionCameraRotation();

我的 GUI.DAT 按钮：

guiCamera.add(rotationOption, 'ROTATION_Y_AXIS').name('Rotation Active');

还有我的 animate() 函数：

function animate() {
    requestAnimationFrame( animate );
    THREE.AnimationHandler.update( 0.05 );
    if (rotationOption.ROTATION_Y_AXIS) {
        scene.rotation.y = (scene.rotation.y + 0.005 * 4)  % (Math.PI * 2);
    }
    renderer.render( scene, camera );
    update();
}

问题出在哪里？

Answer 1

我只需要像这样更正我的 animate() 函数中的 if 语句：

if (rotationOption.ROTATION_Y_AXIS) {
    var timer = Date.now() * 0.0001;

    camera.position.x = Math.cos( timer ) * 200;
    camera.position.z = Math.sin( timer ) * 200;
    camera.lookAt( scene.position );

    renderer.render( scene, camera );
}

Three.js - 相机旋转和变换控件

Three.js - Camera rotation & TransformControls

javascript

rotation

perspectivecamera