Three.js MouseUp event that triggers rotation
<p>As someone new to Three.js and javascript in general, I'm trying to test out some mouse event interactions. I just grabbed some Javascript off of the following page, adjusted it so that it's a 'MouseUp', rather than a 'MouseOver' event and generally simplified it:-</p>

<p><a href="https://threejs.org/examples/#webgl_interactive_cubes" rel="nofollow noreferrer">https://threejs.org/examples/#webgl_interactive_cubes</a></p>

<p>One of the things I'm trying to achive is a rotation of a cube as well as a colour change once the mouse has been clicked on it. At the moment, I've just got a rotation animation going on that changes colour on click and if I click outside of the cube anywhere I've got the cube to go back on itself. I'm just wondering how to get it to pause and resume?</p>

<p>Ideally I'd like the animation to trigger on click or mouseUp.</p>

<p>The code is as follows:</p>

<pre><code>    &lt;script&gt;

  var camera, scene, raycaster, renderer;
  var mouse = new THREE.Vector2(), INTERSECTED;

  var radius = 50;
  var theta = 0;

  init();
  animate();

  function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    var info = document.createElement( 'div' );
    info.style.position = 'absolute';
    info.style.top = '10px';
    info.style.width = '100%';
    info.style.textAlign = 'center';


    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    scene = new THREE.Scene();

    scene.add( new THREE.AmbientLight( 0xffffff, 0.5 ) );

    var light = new THREE.DirectionalLight( 0xffffff, 2 );

    light.position.set( 30, 10, 1 ).normalize();
    scene.add( light );


    camera.position.x = -25;  
    camera.position.y = 15;  
    camera.position.z = 25;  
    camera.lookAt( scene.position );
    camera.updateMatrixWorld();

    var cubeGeometry = new THREE.BoxGeometry(20,20,20);
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x999999, wireframe: false});  
    var object = new THREE.Mesh(cubeGeometry, cubeMaterial);

      object.position.x = 0;  
      object.position.y = 0;  
      object.position.z = 0;

      scene.add( object );


    var cubeGeometry = new THREE.BoxGeometry(5,5,5);
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x999999, wireframe: false});  
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

      cube.position.x = 10;  
      cube.position.y = 10;  
      cube.position.z = 10;

      scene.add( cube );

    raycaster = new THREE.Raycaster();
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor( 0xf0f0f0 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.sortObjects = false;
    container.appendChild(renderer.domElement);


    document.addEventListener( 'mouseup', onDocumentMouseUp, false );   
    window.addEventListener( 'resize', onWindowResize, false );

  }
  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
  }

  function onDocumentMouseUp( event ) {
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    // find intersections
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children );
    if ( intersects.length &gt; 0 ) {
      if ( INTERSECTED != intersects[ 0 ].object ) {
        if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
        INTERSECTED = intersects[ 0 ].object;
        INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
        INTERSECTED.material.emissive.setHex( Math.random() * 0x111111 );
      }
    } else {
      if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
      INTERSECTED = null;

      theta = -75;
    camera.position.x = new camera.position.x;
    camera.position.y = new camera.position.y;
    camera.position.z = new camera.position.x;
    //camera.lookAt( scene.position );
    }
  }

  function animate() {
    requestAnimationFrame( animate );
    render();
  }

  function render() 
  {
    theta += 1;
    camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
    camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
    camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
    camera.lookAt( scene.position );
    renderer.render( scene, camera );
  }
&lt;/script&gt;
</code></pre>