three.js + vue3 (二) 360全景看房 (上篇)
站长
· 阅读数 13
three + vue3 (二) 360全家看房(上篇)
今天的主题就是如何实现360全景看房，以及切换场景，如果需要素材图的话可以dd我，也欢迎大家和我一起讨论一起进步！
环境搭建
根据第一篇的拆解，我们最后搭建出了一个小方块，如果不看第一篇也没关系，只要你自己用three创建材质也是一样的。
这里的controls我是从外面引进来的，我把objControls拆解出来了没有单独封装。
添加纹理
创建一个mesh文件夹，然后创建一个room.js文件，我们主要就是在这里写我们的代码，然后再boxgemery.js中引入调用。
纹理封装函数
我打算把纹理封装成一个class 后续还有其他房间的信息可以直接调用，不用重复写代码，mesh文件夹下创建一个room-template.js文件
因为有很多的房间，所以6张图片的话最好前置统一，这样有利于后续封装调用，这里我全部换成了数字。
这里我就直接贴了，就是循环每张图片然后添加进纹理加载器
然后new一个（）就出来了，代码简洁还很快速。是会动的，只是我这里不会动，我直接截图了，这样的话大致上就完成了上篇，还是比较好理解的! 辅助线的话，要是影响美观大家可以自己去一去，-> axesHelper （辅助坐标）