之前有讲过在同一个场景中添加多台相机以从不同角度查看模型，后来发现全息投影需要的内容就是从不同角度拍摄四个视频，播放之后放上一个透明的四棱锥形状，实现全息投影的效果，我觉得可以用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;
}
好了，效果是完成了，不过没有材料验证，等凑够了材料再看验证结果吧，
效果补上：测试的时候发现黑色的模型显示稍微模糊点，所以换了个亮一点颜色的，找了四个塑料片制作的，效果可能没那么好，但是凑合可以看到效果了。
全息投影模拟
这里不支持上传视频，我就只能上传个图片了，如果想看动态效果可以私我，我发给你视频，或者需要源码也可以给我私信
