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.

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/saveOutput.html [view source] : It shows how to save the output of a cube camera. Thus you can bake your cube camera and reuse it later. It is nice if precomputation is possible.
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.

A Screenshot

How To Install It

You can install it via script tag

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

Or you can install with bower, as you wish.

bower install threex.cubecamera

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.

var geometry	= new THREE.SphereGeometry(0.5, 32, 16)
var material	= new THREE.MeshPhongMaterial({
	color	: 'gold'
})
var mesh	= new THREE.Mesh(geometry, material)
scene.add( mesh )

Now we needs to create the cube camera which gonna update the texture cube live. We do that like this.

var cubeCamera	= new THREEx.CubeCamera(mesh)
scene.add(cubeCamera.object3d)

Don't forget to update it when needed (likely at every frame)

cubeCamera.update(renderer, scene)

Now that we got the textureCube, we set the mesh material to reflect this texture cube.

material.envMap	= cubeCamera.textureCube

This is it! Now you got the live texture cube on your sphere :)

How to bake the cube camera into a cube map for later?

For that use the following function

// get the images from the THREE.CubeCamera
var images  = THREEx.CubeCamera.toImages(cubeCamera, renderer)

It will output an array of 6 images in three.js order (px,nx,py,ny,pz,nz). You can reuse those directly in a cube camera.

jeromeetienne / threex.cubecamera