I am new to three.js and apologize if my question is a bit complex.
I have set up my scene in three.js but now I want the camera's position to smoothly transition from point A to point B (which I will specify in my code). I plan on using Tween.js to help with the camera animation.
What I am looking for is for the camera's position to change every time the left mouse button is clicked. Essentially, I want the camera to toggle between position A and position B whenever the left mouse button is clicked anywhere in the scene.
However, I am unsure how to achieve this specific functionality. I have found tutorials on changing positions while the mouse is held down, but not on toggling back and forth between fixed positions when the mouse is clicked. Could it be as simple as adding an 'if' statement within the render() function that changes the camera position upon a mouse click?
Any guidance would be greatly appreciated.
EDIT:
Below is the code snippet for my render() scene:
function render() {
var timer = Date.now() * 0.00030;
camera.position.x += ( 0.5*Math.sin( timer ) * mouseX - camera.position.x ) * 0.05;
camera.position.y += ( 0.5*Math.cos( timer ) *- mouseY - camera.position.y ) * 0.05;
camera.position.z = 0;
camera.lookAt( scene.position );
for ( i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
if ( object instanceof THREE.Points ) {
object.rotation.y = time * ( i < 4 ? i + 1 : - ( i + 1 ) );
}
}
for ( i = 0; i < materials.length; i ++ ) {
color = parameters[i][0];
h = ( 0 * ( color[0] + time ) % 360 ) / 360;
materials[i].color.setHSL( h, color[1], color[2] );
}
renderer.render( scene, camera );
}
To clarify, my goal is to animate camera.position.z = 0; to a different specified position everytime the left mouse button is clicked in my scene.