Learn Three.js - Third Edition

Combining materials

If you look back at the properties of THREE.MeshDepthMaterial, you can see that there isn't an option to set the color of the cubes. Everything was decided for you by the default properties of the material. Three.js, however, has the option to combine materials to create new effects (this is also where blending comes into play). The following code shows how we can combine materials:

var cubeMaterial = new THREE.MeshDepthMaterial(); 
var colorMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00,    transparent: true, blending: THREE.MultiplyBlending})var cube = new THREE.SceneUtils.createMultiMaterialObject   (cubeGeometry, [colorMaterial, cubeMaterial]); 
cube.children[1].scale.set(0.99, 0.99, 0.99); 

We get the following ...