ThreeJs制作全息投影视频

之前有讲过在同一个场景中添加多台相机以从不同角度查看模型，后来发现全息投影需要的内容就是从不同角度拍摄四个视频，播放之后放上一个透明的四棱锥形状，实现全息投影的效果，我觉得可以用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.camera2 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera2.position.set(-200,0,-200);
      this.camera2.lookAt(0,100,0)

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

      this.camera4 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera4.position.set(200,0,-200);
      this.camera4.lookAt(0,100,0)
    },

此时效果如下，虽然div是四个方向了，但是内容不是的，所以还需要旋转div的角度实现都是人物的下方对准中间的空心。

#container2{
  position:absolute;
  top:300px;
  left:700px;
  width:400px;
  height:400px;
  transform: rotate(90deg);
  background-color: #AAAAAA;
}
#container3{
  position:absolute;
  top:600px;
  left:400px;
  width:400px;
  height:400px;
  transform: rotate(180deg);
  background-color: #AAAAAA;
}
#container4{
  position:absolute;
  top:300px;
  left:100px;
  width:400px;
  height:400px;
  transform: rotate(270deg);
  background-color: #AAAAAA;
}

好了，效果是完成了，不过没有材料验证，等凑够了材料再看验证结果吧，

效果补上：测试的时候发现黑色的模型显示稍微模糊点，所以换了个亮一点颜色的，找了四个塑料片制作的，效果可能没那么好，但是凑合可以看到效果了。

全息投影模拟

这里不支持上传视频，我就只能上传个图片了，如果想看动态效果可以私我，我发给你视频，或者需要源码也可以给我私信