ThreeJS cube with different texture faces lit by point light with canvas renderer?

3
votes

I am trying to draw a cube that uses 6 different images for textures, one for each face. I would like to illuminate the cube with a point light source.

I'm using the canvas renderer because that is the platform available on iOS.

I understood that the Lambert was the way to go. I built my materials array using MeshLambertMaterial.

I managed to get the cube with different faces to render, but without illumination working, see this link.

Here I used: 

cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());

(You need to use Firefox to view this, it looks horrendous in Safari on the Mac (but that's a different issue), but it's fine in the iPhone simulator.)

I also got a version working where the illumination works, but the faces all have the same colour, the texture images appearing to be lost, see this link.

Here I used

cube = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial());

Unfortunately I can't get textured faces and lighting working together.

The code differs on only that one line.

I must be doing something wrong, but I can't figure out what it is, all my googling has been to no avail. I'd be grateful if somebody could point me in the right direction.

BTW thanks to the author for this brilliant software.

1
canvastexturesthree.jscubelight
I'm pretty sure some lights/materials don't work in CanvasRenderer, have you tried using WebGLRenderer just to rule that out? – Neil
In Firefox and Safari on Lion WebGLRenderer works as desired. On iOS WebGL is sadly not available. At least not in the 5.1 iPhone simulator, I haven't tried a later version. – pedrevans

1 Answers