Three.js: how to make a contrast sphere?

Question

How to make a white sphere (THREE.SphereGeometry) be visible on a dark green surface and on a white scene background? Is there some outlining in Three.js? Probably dynamic outlining?

three.js r.58

Answer 1

An easy solution is to use a multi-material, wireframe material combined with your original material, for an example check out:

http://stemkoski.github.io/Three.js/Wireframe.html

A slightly trickier (but perhaps more aesthetically pleasing) solution is to create a second object with the same geometry as the first, at the same position, scaled up by a small amount, with a solid color material, and most importantly, set the "side" parameter to THREE.BackSide. This will ensure that your second mesh does not obscure the first. For an example, check out:

http://stemkoski.github.io/Three.js/Outline.html

And finally, most trickily, you could do some sort of "halo" glow style effect; this solution involves a bit of coding using shaders. For an example, check out:

http://stemkoski.github.io/Three.js/Shader-Halo.html

Hope this helps!