Constant distance between sprite and sphere


I´m having a problem that may be trivial, or due to my lack of knowing Threejs…
The problem: I have a Sprite (billboard) and a sphere. I made a fiddle for that:

Those two should keep the same kinda
distance so that there is always the same black gap between them. Nevertheless, if I now start
zooming in (via OrbitControls) the distance shrinks and the black disappears the more I zoom in…
(as you can see at the attached pictures)


Can I somehow keep the origin distances when zooming in/out? Am I doing something wrong?

Thanks for helping

That’s just normal behavior caused by perspective. I drew a diagram explaining it.


You’re not doing anything wrong, but you might want to consider a different approach.

  1. You could scale the sprite up as the camera gets closer
  2. You could draw another sphere on top of the blue one, with a custom shader on it to achieve the same effect.

I would choose the second approach :slight_smile:

1 Like

Thx for replying,

I’m already up for the 2nd approach - but programming shader, well, thats unfortunately some really new to me. Not to say leaving my comfort zone bigtime…

Any advice will help!

Here’s option 3:

You could move the sprite closer to the camera, about halfway the radius of the sphere. You’ll still get some perspective distortion, but it’ll be less noticeable. See this fiddle:

Here’s the relevant code I updated:

var camera, scene, renderer, controls, mesh, sprite, material;

// New var for rotating the sprite
var spriteParent;

init() {
	// ...

	sprite = new THREE.Sprite( spriteMaterial );
	sprite.scale.set(150, 150,0);

	// Move sprite halfway up the radius of the sphere
	sprite.position.z = 31;

	// Nest sprite inside spriteParent
	spriteParent = new THREE.Group();

	// Add parent of sprite to scene
	 scene.add( spriteParent );

	// ...

function animate() {

	// Make spriteParent always point at camera
	renderer.render(scene, camera);


Thx for the tip @marquizzo , but I think your former solutions (I think I found some entries of yours and @prisoner849 about “glow”)

1 Like