ThreeJs制作全息投影视频-阿里云开发者社区

ThreeJs制作全息投影视频

2024-10-12 42

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这篇文章介绍了使用Three.js来创建全息投影效果的视频教程，涵盖了实现全息效果的技术要点和具体实施步骤。

之前有讲过在同一个场景中添加多台相机以从不同角度查看模型，后来发现全息投影需要的内容就是从不同角度拍摄四个视频，播放之后放上一个透明的四棱锥形状，实现全息投影的效果，我觉得可以用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;
}