Constant distance between sprite and sphere

Questions
#1

Hi,

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:

https://jsfiddle.net/blackInk/kq9pu3hr/

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)

sphereandsprite

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

Thanks for helping

#2

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

spritePerspective

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.
2 Likes
#3

I would choose the second approach :slight_smile:

1 Like
#4

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!

#5

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:

https://jsfiddle.net/kq9pu3hr/16/

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();
	spriteParent.add(sprite);

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

	// ...
}

function animate() {
	requestAnimationFrame(animate);

	// Make spriteParent always point at camera
	spriteParent.lookAt(camera.position);
	renderer.render(scene, camera);
	stats.update();
}
#6

Related:

#7

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