ThreeJs制作全息投影视频

您所在的位置：网站首页 › 全息投影视频制作单价 › ThreeJs制作全息投影视频

ThreeJs制作全息投影视频

2024-07-11 16:52| 来源: 网络整理| 查看: 265

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

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

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

全息投影模拟

【本文地址】

ThreeJs制作全息投影视频

ThreeJs制作全息投影视频

今日新闻

推荐新闻