CODEWITHSUNDEEP
three.js
TheJim01
TheJim01

Reputation: 8876

Set Camera Roll

I'm trying to set up a camera in a specific position/orientation. I can get the position and target to behave correctly, but the camera's "up" orientation is not correct.

For example, my camera sits out on the +Z axis looking at a cube at the origin. I want to "roll" my camera clockwise along the Z axis, to a 45° angle relative to +Y.

When I apply the rotation in the animation loop, it works. When I apply the rotation in my init, or anywhere outside the animation loop, it doesn't work.

I am using TrackballControls.js. Without the control, setting the angle works fine. I've tried a few things to bend TrackballControls.js to my will, but I must be missing something. Once again, I can set position and target without any issues, it just seems to be the rotation that is causing problems.

Here's my fiddle, though there's not much there: http://jsfiddle.net/TheJim01/f75q9rz0/30/

var hostDiv, scene, renderer, camera, root, controls, light, shape, theta;

var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    FOV = 35,
    NEAR = 0.1,
    FAR = 100;

function init() {
    hostDiv = document.createElement('div');
    document.body.appendChild(hostDiv);

    renderer = new THREE.WebGLRenderer({ antialias: true, preserverDrawingBuffer: true });
    renderer.setSize(WIDTH, HEIGHT);
    hostDiv.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
    camera.position.z = 75;

    controls = new THREE.TrackballControls(camera, renderer.domElement);

    light = new THREE.PointLight(0xffffff, 1, Infinity);
    light.position.copy(camera.position);

    scene = new THREE.Scene();
    scene.add(camera);
    scene.add(light);

    var geo = new THREE.BoxGeometry(5, 5, 5);
    var mat = new THREE.MeshPhongMaterial({color:'red'});
    var msh = new THREE.Mesh(geo, mat);
    scene.add(msh);

    theta = 0.78;

    //camera.rotateZ(theta);
    controls.object.rotateZ(theta);

    animate();
}

function animate() {
    //camera.rotateZ(theta);

    light.position.copy(camera.position);

    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
}

init();

r68

Upvotes: 1

Views: 1224

Answers (1)

TheJim01
TheJim01

Reputation: 8876

I eventually worked something out. I modified TrackballControl.js with a new method to reset, then set the camera position/rotation. The rotation had to be done by modifying the camera's up vector, rather than by rotating the camera (though one would think they would have the same effect).

Upvotes: 1

Related Questions