title: rotation collada model
body: <p>I have an collada model from a cow, and i want to rotate around that model with my mouse. I have searched for solutions found alot but non of those work with my code.</p>
  
  <p>beneath is the code.</p>
  
  <p>My problem is: that i want to rotate the model with the mouse and not auto rotate</p>
  
  <pre><code>    &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=2.0, maximum-scale=2.0"&gt;
      &lt;style&gt;
          body {
              font-family: Monospace;
              background-color: #676578;
              margin: 0px;
              overflow: hidden;
          }
  
          #info {
              color: #000000;
              position: absolute;
              top: 10px;
              width: 100%;
              text-align: center;
              z-index: 100;
              display:block;
  
          }
  
          a { color: skyblue }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;script src="js/three.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/ColladaLoader.js"&gt;&lt;/script&gt;
      &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
      &lt;script src="js/stats.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/TrackballControls.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          //als de browser geen open gl ondersteunt, geeft ie een message
          if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  
          var container, stats;
  
          var camera, scene, renderer, objects;
          var particleLight, pointLight;
          var dae, skin;
  
          var loader = new THREE.ColladaLoader();
          loader.options.convertUpAxis = true;
          loader.load( './models/collada/monster/monster.dae', function ( collada ) {
  
              dae = collada.scene;
              skin = collada.skins[ 0 ];
              //scale van de koe, scaled de x y en z as gelijk
              dae.scale.x = dae.scale.y = dae.scale.z = 0.006;
              dae.updateMatrix();
  
              init();
              animate();
  
  
  
          } );
  
          function init() {
  
              container = document.createElement( 'div' );
              document.body.appendChild( container );
  
              camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
              camera.position.set( 0, 0, 3 );
  
              scene = new THREE.Scene();
  
              // Grid
  
              /*/
              //grid grote
              var size = 0, step = 1;
  
              var geometry = new THREE.Geometry();
              var material = new THREE.LineBasicMaterial( { color: 0xcccccc, opacity: 0.2 } );
  
              for ( var i = - size; i &lt;= size; i += step ) {
  
                  geometry.vertices.push( new THREE.Vector3( - size, - 0.04, i ) );
                  geometry.vertices.push( new THREE.Vector3(   size, - 0.04, i ) );
  
                  geometry.vertices.push( new THREE.Vector3( i, - 0.04, - size ) );
                  geometry.vertices.push( new THREE.Vector3( i, - 0.04,   size ) );
  
              }
  
              var line = new THREE.Line( geometry, material, THREE.LinePieces );
              scene.add( line );/*/
  
              // Add the COLLADA
  
              scene.add( dae );
  
              particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
              scene.add( particleLight );
  
              // Lights
  
              scene.add( new THREE.AmbientLight( 0xcccccc ) );
              //hoeveelheid licht
              var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xe5e5e4 );
              directionalLight.position.x = Math.random() - 10;
              directionalLight.position.y = Math.random() - 10;
              directionalLight.position.z = Math.random() - 10;
              directionalLight.position.normalize();
              scene.add( directionalLight );
  
              pointLight = new THREE.PointLight( 0xffffff, 4 );
              pointLight.position = particleLight.position;
              scene.add( pointLight );
  
              renderer = new THREE.WebGLRenderer();
              renderer.setSize( window.innerWidth, window.innerHeight );
  
              container.appendChild( renderer.domElement );
  
              stats = new Stats();
              stats.domElement.style.position = 'absolute';
              stats.domElement.style.top = '0px';
              container.appendChild( stats.domElement );
  
              //
  
              window.addEventListener( 'resize', onWindowResize, false );
  
          }
  
          function onWindowResize() {
  
              camera.aspect = window.innerWidth / window.innerHeight;
              camera.updateProjectionMatrix();
  
              renderer.setSize( window.innerWidth, window.innerHeight );
  
          }
  
          //
  
          var t = 0;
          var clock = new THREE.Clock();
  
          function animate() {
  
              var delta = clock.getDelta();
  
              requestAnimationFrame( animate );
  
              if ( t &gt; 0 ) t = 0;
  
              if ( skin ) {
  
                  // guess this can be done smarter...
  
                  // (Indeed, there are way more frames than needed and interpolation is not used at all
                  //  could be something like - one morph per each skinning pose keyframe, or even less,
                  //  animation could be resampled, morphing interpolation handles sparse keyframes quite well.
                  //  Simple animation cycles like this look ok with 10-15 frames instead of 100 ;)
  
                  for ( var i = 0; i &lt; skin.morphTargetInfluences.length; i++ ) {
  
                      skin.morphTargetInfluences[ i ] = 10;
  
                  }
  
  
  
  
  
              }
  
              render();
              stats.update();
  
  
          }
  
          function render() {
              //snelheid van het draaien
              var timer = Date.now() * 0.0005;
              //camera positie op x
              camera.position.x = Math.cos( timer ) * 15;
              camera.position.y = 2;
              // camera positie op z
              camera.position.z = Math.sin( timer ) * 10;
  
              camera.lookAt( scene.position );
              // light positie
              particleLight.position.x = Math.sin( timer * 0 ) * 3009;
              particleLight.position.y = Math.cos( timer * 0 ) * 4000;
              particleLight.position.z = Math.cos( timer * 0 ) * 3009;
  
              renderer.render( scene, camera );
  
          }
  
  
          //nieuw
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>