threex.transparency is a three.js games extension to easily handle transparency. Transparency is a tricky business in Webgl, but this extension makes it approachable. It is worth trying. Do you remember the transparency between the leaves of a tree in 3D games? Well, with this extension you will be able to add it to your own game. You can also make clouds appear transparent in the sky you have created for your game. It is easy to include and it gives a nice polish finish, a professional touch.
- examples/basic.html [view source] : It shows a basic usage of this extension.
You can install it via script tag
<script src='threex.transparency.js'></script>Or you can install with bower, as you wish.
bower install threex.transparencyThe algo is well described in this opengl tutorial about transparency. We just adapt it to fit three.js. First you setup all the objects that you want to be transparent
THREEx.Transparency.init(objects)
It will change the THREE.Material to make it support transparent.
Second you need to update all your objects at every frame.
THREEx.Transparency.update(objects, camera)