vr全景看房通过创建多个立方体盒子,并给立方体盒子是6个方位添加图片,将视角设置为立方体盒子中心通过鼠标调整视角视角达到vr全景看房的效果。
创建一个div当我们的资源加载时,显示这些信息给用户返回当前状态,当进度为100%的时候就隐藏信息.
纹理加载进度是通过threejs的 DefaultLoadingManager 来获取.
vr看房是在盒子中心查看四周,所以我们将相机位置设为中心点
创建立方体盒子,也就是当前我们所在的房间,因为立方体默认是向外展示的,所以我们需要设置立方体的面是向里面的。通过scale来设置。
通过TextureLoader加载我们的纹理图片。
将纹理图片加载完成后,创建材质,并将图片设置为纹理图片。
创建盒子,并将我们上面创建的纹理材质加入到盒子中
当我们把盒子创建完成后,我们需要可以拖动鼠标查看周围的场景,这时候我们需要监听鼠标按下事件
移动鼠标来实现相机的移动,达到视角移动的效果。
vue3 全景看房实例代码开发环境基于vue3 vite js nodejs 14
THE END