Three.js - Using Multiple Materials

Until now, while creating a Mesh, you added a single material to it. There are also cases where you want to combine multiple materials. You can do that by passing an array of materials. But you should not use Mesh. Instead, you can use createMultipleMaterialObject of SceneUtils. For example, the following code combines THREE.MeshLambertMaterial with a material that shows you the wireframe of the geometry.

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material1 = new THREE.MeshLambertMaterial({
color: 0xff0000,
   transparent: true,
   opacity: 0.7,
})
const material2 = new THREE.MeshBasicMaterial({ wireframe: true })
const cube = THREE.SceneUtils.createMultiMaterialObject(cylinderGeometry, [
   material1,
   material2,
])