This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.transparency. 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.
To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”
Show Don’t Tell
How To Install It
You can install it via script tag
Or you can install with bower, as you wish.
How To Use It ?
The 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
It will change the
THREE.Material to make it support transparent.
Second you need to update all your objects at every frame.