????????在threeJs開發數字孿生中，我們正常是需要使用一個相機，畫面顯示的內容也就是這個相機拍攝到的內容，但是是否可以添加多個相機，可以同時從不同角度觀察模型呢，實際上是可以的，不過多個相機的拍攝到的畫面肯定需要在多個容器中顯示，也就是需要創建多個渲染器，每個渲染器渲染對應的相機拍攝到的畫面，下面是代碼實現：

假設我們需要從前后左右四個角度查看，那么我們要先定義四個html標簽，以便后期展示不同相機的畫面：

  <div id="container1"></div><div id="container2"></div><div id="container3"></div><div id="container4"></div>

其次需要定義四個相機，并設置在不同的觀察角度：

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);},

最終就可以實現了；效果如下