【Three.js】オブジェクトを複製する

同じジオメトリとマテリアルから作成したメッシュをシーンに追加することで
オブジェクトを複製する。

let maze1;

window.addEventListener('load', init);

function init() {
  const width = 640;
  const height = 480;

  const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#myCanvas')
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);

  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(60, width / height);
  camera.position.set(15, 15, 15);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshNormalMaterial();
  for (let x=0; x<5; ++x) {
    const box = new THREE.Mesh(geometry, material);
    box.position.set(x*2+0.5, 0.5, 0.5);
    scene.add(box);
  }
  
  const plane = new THREE.Mesh(                                      
             new THREE.PlaneGeometry(10, 10, 1, 1),
              new THREE.MeshBasicMaterial({ 
                color: 0xffffff             
                }));
  plane.position.set(5, 0, 5);
  plane.rotation.x = -0.5 * Math.PI;
  scene.add(plane); 
  
  const axes = new THREE.AxesHelper(12);
  scene.add(axes);

  renderer.render(scene, camera);
}

今回は、以下のように出力される。