title: Rotate the object not camera using three.js
body: <p>I want to rotate object when the mouse down event occur,
  but right now the problem is that when i click left mouse down the object is rotated across the camera...I do not understand where is the issue..</p>
  
  <p>Below is the code</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;three.js webgl - loaders - OBJ loader&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
      &lt;style&gt;
          body {
              font-family: Monospace;
              background-color: #000;
              color: #fff;
              margin: 0px;
              overflow: hidden;
          }
          #info {
              color: #fff;
              position: absolute;
              top: 10px;
              width: 100%;
              text-align: center;
              z-index: 100;
              display:block;
          }
          #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="container"&gt;
  
      &lt;/div&gt;
  
      &lt;script src="build/three.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://threejs.org/examples/js/controls/TrackballControls.js"&gt;&lt;/script&gt;
      &lt;script src="js/loaders/OBJLoader_f.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
      &lt;script src="js/libs/stats.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
          if (!Detector.webgl) Detector.addGetWebGLMessage();
  
          var container, stats;
          var projector;
          var camera, scene, renderer, controls;
  
          var width = 1200;
          var height = 800;
  
          var mouseX = 0, mouseY = 0;
  
  
          init();
          animate();
  
  
          function init() {
  
  
              camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
              camera.position.z = 100;
  
  
              // trackball controls
              controls = new THREE.TrackballControls(camera);
              controls.rotateSpeed = 1.0;
              controls.zoomSpeed = 1.2;
              controls.panSpeed = 0.8;
  
              controls.noZoom = false;
              controls.noPan = false;
  
              controls.staticMoving = true;
              controls.dynamicDampingFactor = 0.3;
  
              controls.keys = [65, 83, 68];
  
              controls.target.set(0, 10, 0);
  
              controls.addEventListener('change', render);
  
              //Scene
              scene = new THREE.Scene();
              scene.add(camera);
  
              var ambient = new THREE.AmbientLight(0x101030);
              scene.add(ambient);
  
              var directionalLight = new THREE.DirectionalLight(0xffeedd);
              directionalLight.position.set(0, 0, 1).normalize();
              scene.add(directionalLight);
  
             var loader = new THREE.OBJLoader();
  
  
              loader.load('http://localhost:56689/obj/spine/spine_test.js', function (object)
              {
                  scene.add( object );
  
              });
  
  
              // RENDERER
  
              renderer = new THREE.WebGLRenderer({ antialias: false });
  
              renderer.setSize(window.innerWidth, window.innerHeight);
  
              container = document.getElementById('container');
              container.appendChild(renderer.domElement);
  
              stats = new Stats();
              stats.domElement.style.position = 'absolute';
              stats.domElement.style.top = '0px';
              stats.domElement.style.zIndex = 100;
              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);
  
              controls.handleResize();
  
              render();
  
          }
  
  
          function animate() {
              try
              {
                  requestAnimationFrame(animate);
                  controls.update();                  
              }
              catch (err)
              {
                  alert("animate error. " + err.message);
              }
          }
  
          function render() {
  
              renderer.render(scene, camera);
  
              stats.update();
          }
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I am not beginner for using three.js file, 
  so please help me if anybody know my problem...Just want to rotation the object when mouse down is click....</p>
  
  <p>Thanks,
  Pratik</p>