ThreeJs制作全息投影视频

baker_zhuang

已于 2024-11-22 13:55:39 修改

阅读量884

点赞数 7

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

于 2024-03-05 10:36:14 首次发布

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

版权

之前有讲过在同一个场景中添加多台相机以从不同角度查看模型，后来发现全息投影需要的内容就是从不同角度拍摄四个视频，播放之后放上一个透明的四棱锥形状，实现全息投影的效果，我觉得可以用threejs来做一个全息投影的视频，因为threejs支持交互，所以后期还可以根据需要做一个可以互动的全息投影视频，下面我们接着上次的方法来写：

首先要知道全息投影的视频是四个方向的，在投影的时候将每个方向的内容投射到四棱锥的每个面上，我们先找一个人物的模型：

然后将这个模型添加到场景中：

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

然后调整每个相机的位置：

 initCamera(){
      this.camera1 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera1.position.set(200,0,200);
      this.camera1.lookAt(0,100,0)

      this.cam