Three.js - Camera rotation & TransformControls

Question

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 ?

Yes I know, but if I replace it by camera.rotation it doesn't do a rotation — sRcBh

sRcBh sRcBh · Accepted Answer · 2015-10-22T07:36:16

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

Three.js - Camera rotation & TransformControls

1 Answers