Learning Three.js

or WebGL for Dummies

Easy Way to Include Transparency in Your Three.js Game With threex.transparency

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

<script src='threex.transparency.js'></script>

Or you can install with bower, as you wish.

bower install threex.transparency

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.

THREEx.Transparency.update(objects, camera)