Three.js: attach object to camera but not make it rotate with it

Question

I currently have a SphereGeometry attached to a Perspective Camera. But when I rotate the camera, the Sphere rotates with the camera which is normal but in my case I do not want that.

Here is what I have:

camera.add(Sphere);
Sphere.position.set (0, -100, 0);

What I want is to attach the sphere to the bottom of the camera but stay in that position. Currently, when I rotate the camera, the Sphere seems to rotate with it so I cannot see it. How can I attach the child object in a way that does not rotate with the camera? Thanks.

Answer 1

One approach is to define an onBeforeRender() method for your sphere mesh. For example:

scene.add( sphere ); // add it as a child of the scene, not the camera

sphere.onBeforeRender = function( renderer, scene, camera, geometry, material, group ) {
    var pos = camera.position;
    this.position.set( pos.x, pos.y - 100, pos.z );
};

three.js r.86