Graphics Reference
In-Depth Information
As you can see in the preceeding, only part of the sphere is visible, and you can look
through the sphere to see the back at the other side of the sphere.
How to do it...
Let's look at the steps you need to take to accomplish this:
1. The first thing we do is create the geometry. For this recipe, we use
THREE.SphereGeometry
:
var sphereGeometry = new
THREE.SphereGeometry(6, 20, 20);
Just like all the other recipes, you can use whatever geometry you want.
2. In the second step, we create the material:
var mat = new THREE.MeshPhongMaterial();
mat.map = new
THREE.ImageUtils.loadTexture(
"../assets/textures/
partial-transparency.png");
mat.transparent = true;
mat.side = THREE.DoubleSide;
mat.depthWrite = false;
mat.color = new THREE.Color(0xff0000);
As you can see in this fragment, we create
THREE.MeshPhongMaterial
and load the texture we saw in the
Getting ready
section of this recipe.
To render this correctly, we also need to set the side property to
THREE.DoubleSide
so that the inside of the sphere is also rendered, and
we need to set the
depthWrite
property to false. This will tell WebGL that
we still want to test our vertices against the WebGL depth buffer, but we don't
write to it. Often, you need to set this to false when working with more com-
plex transparent objects or particles.
3. Finally, add the sphere to the scene:
