Three.jsで複数のカメラ切り替える 🎥

複数のカメラをスイッチングしたいなと思って、いろいろ試しました。
しかし、なんら難しいことはなく、結論から書くと、カメラを複数用意して、renderer.renderに渡し直してあげれば実現できました。

DEMO

ソースコード（抜粋）

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('canvas'),
  antialias: true,
  alpha: true
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

const scene = new THREE.Scene();

const cameras = [
  new THREE.PerspectiveCamera(45),
  new THREE.PerspectiveCamera(45)
];

cameras[0].position.set(1, 2, 1);
cameras[1].position.set(0, 0, -4);

cameras.forEach((camera) => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  scene.add(camera);
});

let currentCameraIndex = 0;

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshNormalMaterial()
);

scene.add(cube);

renderer.setAnimationLoop(() => {
  renderer.render(
    scene,
    cameras[currentCameraIndex] // 選択されたカメラを渡す
  );
});

document.querySelector('button').addEventListener('click', () => {
  currentCameraIndex = Number(!currentCameraIndex); // ボタンをクリックするたびに0と1を切り替える
});