title: Static Object in Scene - Three.js
body: <p>I have two objects in my scene. I am using the  </p>
  
  <pre><code> &lt;script src="js/controls/LeapTrackballControls.js"  &gt;&lt;/script&gt;
  </code></pre>
  
  <p>for moving the camera, so it feels like the objects is rotating according to the movement of my hand.</p>
  
  <p>The problem is that the other object is also moving, and I want it to remain always in front of me. I mean, that even if the camera moves, the object always is in the same place inside the canvas/explorer. </p>
  
  <p>Sorry if I'm not explaining myself properly.</p>
  
  <p>Any help is appreciated.</p>
  
  <p>EDIT:</p>
  
  <pre><code>var controls = new THREE.LeapTrackballControls( camera , controller );
  </code></pre>
  
  <p>So, I have a sphere in the middle of the scene. I use the LeapTrackball library to move the camera around the center of the scene. This makes the user feel like the sphere is rotating around his center. </p>
  
  <pre><code>model = new THREE.Mesh(modelGeo, modelMat);
  model.geometry.dynamic = true;
  model.position.set(0, 0, 0);
  scene.add(model);
  </code></pre>
  
  <p>My problem is that I have another shape: </p>
  
  <pre><code>myMesh = new THREE.Mesh(circleGeometry, material);
  myMesh.position.set(0, 0, 10);
  scene.add(myMesh);
  </code></pre>
  
  <p>that is also affected by the rotation of the camera. What I want is to keep the 'fake rotation' of the sphere, while the other mesh stays in the middle of the screen (0,0,10).</p>
  
  <p>Ok, so this is my camera object.</p>
  
  <p>var camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 5000);</p>
  
  <p>And my render function, which is used for update the control/movement of the camera.</p>
  
  <pre><code>   function render() {
          controls.update();
          renderer.render(scene, camera);
          doMouse();
          if(useOrbitControls){
              orbitControls.update();
          }
      }
  </code></pre>
  
  <p>I'm using a Leap controller, and this is the function that builds it up:</p>
  
  <pre><code>function leapMotion() {
                  var controllerOptions = {
                      enableGestures: true
                      , background: true
              , frameEventName: 'animationFrame'
                  , };
  
  [...]
  
      controller.on('frame', onFrame);
  </code></pre>
  
  <p>Basically, this means that the onFrame function is done everytime that it receives a frame (60 per second aprox.)</p>
  
  <pre><code>    function onFrame(frame){
  [...]
          }
  </code></pre>
  
  <p>There is not much more, all the magic comes from the library that you can find here:</p>
  
  <p><a href="https://leapmotion.github.io/Leap-Three-Camera-Controls/" rel="noreferrer">https://leapmotion.github.io/Leap-Three-Camera-Controls/</a></p>