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

最新推荐文章于 2024-09-20 00:00:00 发布

baker_zhuang

最新推荐文章于 2024-09-20 00:00:00 发布

阅读量1.3k

点赞数 5

分类专栏： ThreeJs 文章标签： threejs

本文链接：https://blog.csdn.net/qq_26881073/article/details/136393851

版权

ThreeJs 专栏收录该内容

77 篇文章 12 订阅

订阅专栏

本文介绍了如何在three.js中使用多个相机从不同角度观察数字孪生模型，通过创建四个渲染器来显示各自相机的视角，并通过实例代码展示了如何设置相机位置、加载模型和动画更新渲染器的过程。

摘要由CSDN通过智能技术生成

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

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

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