Search code examples
javascriptrotationthree.jsperspectivecamera

Three.js - Camera rotation & TransformControls


In my three.js scene I can add and edit objects. I recently added a "Rotate Camera" checkbox which works great. But the problem is that the transformControls attached to the object seems to rotate differently: when I stop the rotation, the controls are displaced in comparison with the object. Here is my function:

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

My GUI.DAT button:

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

And my animate() function:

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();
}

Where is the problem located ?


Solution

  • I just had to correct my if statement in my animate() function like this:

    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 );
    }