CODEWITHSUNDEEP
three.jsgeometry
Pamplones
Pamplones

Reputation: 85

Intermittent semi-transparent sphere in Three.js

I would like somebody to explain me how I can achieve the blue semi-transparent intermittent sphere of this example: (the one next to the intermittent red sphere)

http://threejs.org/examples/webgl_materials.html

I believe in first place that this is a matter of using the right material with the right settings (specially because the example is about materials) but not sure anyway.

Hopefully you do not feel my question does not deserve to be made here. I was trying to analyze it but definitely it is written in a non-friendly way for newbies, and I've not been able to separate this part from the rest, not I find an explanation anywhere else.

Upvotes: 3

Views: 6370

Answers (1)

Stemkoski
Stemkoski

Reputation: 9045

To create, for example, a partially transparent blue sphere, you could try:

var sphereGeom =  new THREE.SphereGeometry( 40, 32, 16 );
var blueMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff, transparent: true, opacity: 0.5 } );
var sphere = new THREE.Mesh( sphereGeom, blueMaterial );

For more examples of creating semi-transparent materials, check out

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

If you want the sphere to fade in and out, you can change the transparency in your update or render function -- make the sphere a global object, also create a (global) clock object to keep track of the time in your initialization, for example, with

clock = new THREE.Clock();

and then in your update, you could, for example, write

sphere.material.opacity = 0.5 * (1 + Math.sin( clock.getElapsedTime() ) );

Upvotes: 10

Related Questions