material.clone(), random colors

일반적으로 새로운 Mesh 를 만들 때, const mesh = new THREE.Mesh(geometry, material); 사용합니다. 그러나 여러개의 Mesh 를 생산하는 경우에 Geometry 는 같아도, 재질( Material )은 별도로 처리 하고자 할 때가 많습니다. 

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 빨간색 재질
const mesh1 = new THREE.Mesh(geometry, material); // 첫 번째 메쉬는 빨간색
const mesh2 = new THREE.Mesh(geometry, material.clone()); // 복사된 재질을 사용

// mesh2의 재질 색상을 바꿔도 mesh1에는 영향을 주지 않음
mesh2.material.color.set(0x00ff00); // 두 번째 메쉬는 녹색

아래의 예제처럼 함수를 이용하여 Mesh 를 만드는 경우는 더욱이 이유가 분명해집니다.

function createMesh(geometry, material, x, y, z, name) {
  const mesh = new THREE.Mesh(geometry, material.clone());
  mesh.position.set(x, y, z);
  mesh.name = name;
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  mesh.layers.set(layer);
  return mesh;
}

const boxes = new THREE.Group();
boxes.add(createMesh(boxGeometry, material, -1, 1, 0, 'Box A', 0));
boxes.add(createMesh(boxGeometry, material, -4, 1, 0, 'Box B', 0))
boxes.add(createMesh(boxGeometry, material, -2.5, 3, 0, 'Box C', 0));
scene.add(boxes);

for ( let i = 0; i < boxes.children.length; i++ ) {
  const color = new THREE.Color(Math.random(), Math.random(), Math.random());
  boxes.children[i].material.color = color
}