Static Object in Scene - Three.js

Question

I have two objects in my scene. I am using the

 <script src="js/controls/LeapTrackballControls.js"  ></script>

for moving the camera, so it feels like the objects is rotating according to the movement of my hand.

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.

Sorry if I'm not explaining myself properly.

Any help is appreciated.

EDIT:

var controls = new THREE.LeapTrackballControls( camera , controller );

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.

model = new THREE.Mesh(modelGeo, modelMat);
model.geometry.dynamic = true;
model.position.set(0, 0, 0);
scene.add(model);

My problem is that I have another shape:

myMesh = new THREE.Mesh(circleGeometry, material);
myMesh.position.set(0, 0, 10);
scene.add(myMesh);

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).

Ok, so this is my camera object.

var camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 5000);

And my render function, which is used for update the control/movement of the camera.

   function render() {
        controls.update();
        renderer.render(scene, camera);
        doMouse();
        if(useOrbitControls){
            orbitControls.update();
        }
    }

I'm using a Leap controller, and this is the function that builds it up:

function leapMotion() {
                var controllerOptions = {
                    enableGestures: true
                    , background: true
            , frameEventName: 'animationFrame'
                , };

[...]

    controller.on('frame', onFrame);

Basically, this means that the onFrame function is done everytime that it receives a frame (60 per second aprox.)

    function onFrame(frame){
[...]
        }

There is not much more, all the magic comes from the library that you can find here:

https://leapmotion.github.io/Leap-Three-Camera-Controls/

Answer 1

If you want an object -- such as crosshairs -- to be fixed in front of the camera, you can do so by adding the object as a child of the camera. Use a pattern like this one:

scene.add( camera ); // required when the camera has a child
camera.add( object );
object.position.set( 0, 0, - 100 ); // or whatever distance you want

three.js r.71