Three.js MouseUp event that triggers rotation

Question

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:-

https://threejs.org/examples/#webgl_interactive_cubes

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?

Ideally I'd like the animation to trigger on click or mouseUp.

The code is as follows:

    <script>

  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 > 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 );
  }
</script>

Answer 1

If I got you right. In the animate() function, you can do it like this:

function animate() {
    requestAnimationFrame( animate );
    if ( INTERSECTED ) INTERSECTED.rotation.y += 0.01;
    render();
}

Thus, you check if INTERSECTED is not null and if it's not, then rotate the object you've selected.