CODEWITHSUNDEEP
javascriptthree.js
WebFive
WebFive

Reputation: 13

start camera rotation from specific point in three js

I have a panoramic image loaded in threejs but it starts camera rotation from the logic below which is default in threejs

if ( isUserInteracting === false ) {

    lon += 0.1;
}

lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );

camera.target.x = 100 * Math.sin( phi ) * Math.cos( theta );
camera.target.y = 100 * Math.cos( phi );
camera.target.z = 100 * Math.sin( phi ) * Math.sin( theta );

What I want to do is place the camera at a specific point which I am able to place using

camera.lookAt( -56.86954186163314,  0,  -71.49481268065709 );

Now i want to start normal camera rotation from the above lookAt point. What I am currently doing is 

camera.lookAt( -56.86954186163314 + camera.target.x,  0,  -71.49481268065709 + camera.target.z);

Which is wrong I think.. PS (I am very weak in geometry, sin, cos).. Can any 1 please help me with this?? PS(I dont want to change camera.target.y It should be 0).. Thanks in advance..

Upvotes: 0

Views: 305

Answers (1)

TheJim01
TheJim01

Reputation: 8886

This is best looked at from the perspective of vectors.

Take your lookAt position: that's a vector. You can make that vector spin around an axis using Vector3.applyAxisAngle. As you update the vector, make your camera look at it.

For your example, you want the camera to look at -56.86954186163314, 0, -71.49481268065709, and then spin 360° about the Y-axis (the camera position doesn't change, and the lookAt target doesn't change its Y value).

var lookVector = new THREE.Vector3();

// later...
lookVector.set(x, y, z); // -56.86954186163314,  0,  -71.49481268065709

// down with your render function...
var axis = new THREE.Vector3(0, 1, 0);

function render(){
    lookVector.applyAxisAngle(axis, 0.001); // or some other theta
    camera.lookAt(lookVector);
    renderer.render(scene, camera);
}

You'll need to track when your thetas add up to 360°, and perform logic to stop the rotation, but I'll leave that as an exercise for you.

Upvotes: 0

Related Questions