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

Question

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.

Answer 1

Unfortunately, it turns out that MeshLambertMaterial isn't supported by the CanvasRenderer.