ThreeJs同一个场景多个相机的显示

在threeJs开发数字孪生中，我们正常是需要使用一个相机，画面显示的内容也就是这个相机拍摄到的内容，但是是否可以添加多个相机，可以同时从不同角度观察模型呢，实际上是可以的，不过多个相机的拍摄到的画面肯定需要在多个容器中显示，也就是需要创建多个渲染器，每个渲染器渲染对应的相机拍摄到的画面，下面是代码实现：

假设我们需要从前后左右四个角度查看，那么我们要先定义四个html标签，以便后期展示不同相机的画面：

其次需要定义四个相机，并设置在不同的观察角度：

initCamera(){this.camera1 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera1.position.set(1000,1000,1000);this.camera1.lookAt(0,0,0)this.camera2 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera2.position.set(-1000,1000,-1000);this.camera2.lookAt(0,0,0)this.camera3 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera3.position.set(-1000,1000,1000);this.camera3.lookAt(0,0,0)this.camera4 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera4.position.set(1000,1000,-1000);this.camera4.lookAt(0,0,0)},

此时需要在场景中添加一个用于观察的模型：

 initModel(){const loader = new GLTFLoader()loader.load("/static/model/agv.gltf", (gltf) => {this.model = gltf.scene;scene.add(this.model) // 加入场景})},

再定义四个渲染器，用于分别渲染四个相机中的内容

initRenderer(){this.renderer1 = new THREE.WebGLRenderer({ antialias: true });this.container1 = document.getElementById("container1")this.renderer1.setSize(this.container1.clientWidth, this.container1.clientHeight);this.renderer1.setClearColor('#FFFFFF', 1.0);this.container1.appendChild(this.renderer1.domElement);this.renderer2 = new THREE.WebGLRenderer({ antialias: true });this.container2 = document.getElementById("container2")this.renderer2.setSize(this.container2.clientWidth, this.container2.clientHeight);this.renderer2.setClearColor('#FFFFFF', 1.0);this.container2.appendChild(this.renderer2.domElement);this.renderer3 = new THREE.WebGLRenderer({ antialias: true });this.container3 = document.getElementById("container3")this.renderer3.setSize(this.container3.clientWidth, this.container3.clientHeight);this.renderer3.setClearColor('#FFFFFF', 1.0);this.container3.appendChild(this.renderer3.domElement);this.renderer4 = new THREE.WebGLRenderer({ antialias: true });this.container4 = document.getElementById("container4")this.renderer4.setSize(this.container4.clientWidth, this.container4.clientHeight);this.renderer4.setClearColor('#FFFFFF', 1.0);this.container4.appendChild(this.renderer4.domElement);},

最后为了证实为同一个模型，我们可以将这个模型设置旋转，并不断更新渲染器

initAnimate() {if(this.model){this.model.rotation.y += 0.03;}requestAnimationFrame(this.initAnimate);this.renderer1.render(scene, this.camera1);this.renderer2.render(scene, this.camera2);this.renderer3.render(scene, this.camera3);this.renderer4.render(scene, this.camera4);},

最终就可以实现了；效果如下

四个相机通过四个角度观察模型