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.cubecamera. threex.cubecamera is a three.js games extension which provides a helper for cube cameras. It is very useful when a given object must reflect a texture cube live. Just look at it, you can see the reflection as clear as a real life mirror! You can give your texture the color you want, for example in the demo I created a “gold” sphere to give it a shinier look. Be careful though, this requires 6 renderings of the scene every time you update it. It becomes expensive fast.
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
- examples/basic.html [view source] : It shows the most basic usage of this extension.
- examples/demo.html [view source] : It shows a little bit shinier demo.
- examples/discoball.html [view source] : It shows a little bit shinier discoball. TODO to port in its own demo. It doesnt even use live rendering. Use the “minecraft goes party” from nextgamefrontier talk.
How To Install It
You can install it via script tag
Or you can install with bower, as you wish.
How To Use It
First you need to create a classic mesh, the one which gonna reflect the live texture cube. In this example, we gonna create sphere with the color ‘gold’ like this.
1 2 3 4 5 6
Now we needs to create the cube camera which gonna update the texture cube live. We do that like this.
Don’t forget to update it when needed (likely at every frame)
Now that we got the textureCube, we set the mesh material to reflect this texture cube.
This is it! Now you got the live texture cube on your sphere :)