three.js - How to toggle camera position if mouse is clicked?

Question

I'm pretty new to three.js so I'm sorry if this question seems a bit convoluted.

So I already have my scene set up in three.js, but I want my camera's position to animate smoothly from point A to point B (I will specify the positions for A and B in my code). I would probably do this using Tween.js to ease the camera animation.

I want my camera's change in position to happen whenever the left mouse button is clicked. So basically, the camera's position gets toggled from position A to position B and vice versa whenever the left mouse button is clicked anywhere on the scene.

However, I'm not sure how to even replicate something like this. I found tutorials on how to change positions whenever the mouse is held down, but nothing that toggles the position back and forth, in fixed positions, whenever the mouse is clicked. I don't know if to do this I would have to make an 'if' statement in the function render() section of my code, that states if the mouse is clicked to change camera position, but I guess that would be too simple?

Any help is appreciated.

EDIT:

Here's the code 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 );

        }

Just to clarify, I was hoping to animate camera.position.z = 0; to a different specific position whenever the left mouse button is clicked on my scene.

Added in my code. I tried improvising from this tutorial, but it's a bit difficult for me to comprehend. My main problem is I don't know how to get the input for whenever the mouse is clicked. I just want a simple camera spline animation on my camera's z axis, that toggles back and forth whenever my left mouse button is clicked on my scene. — qbuffer

Soviut Soviut · Accepted Answer · 2016-10-22T04:35:09

You can listen for mouse events on the document, toggle the position and then call render() to redraw the canvas.

// list of positions in [x, y, z] coordinates
var positions = [
  [0, 0, 0],
  [5, 0, 0]
];

// set our first position
var positionIndex = 0;
var position = positions[positionIndex];

document.addEventListener('click', function() {
  // when a click happens ...
  positionIndex++;
  // reset position index back to 0 if it's past the end of the array
  positionIndex = positionIndex >= positions.length ? 0 : positionIndex;
  
  // update the current position
  position = positions[positionIndex];
  
  // re-render the canvas
  render();
});

function render() {
  console.log('rendering at position', position);
}


// do our inital render
render();

three.js - How to toggle camera position if mouse is clicked?

1 Answers