vue 使用 threejs 实现实景看房效果 demo
关于这个 threejs 实现 VR 看房效果也超级简单，只需要提供一个思路的话就可以了其实，首先需要一个房间结构的贴图，这个贴图网上有，当然找个合适的也不好找，我找了一上午在别人的 demo 里面扣了一张出来，代码都是一样的，稍微说一下思路。一张全景图，超级简单，在绘制一个球的模型，把这个全景图贴到球上作为材质，然后把相机视角移动到球内，将球面翻转，让贴图在球内显示即可。
图片素材
首先需要下面这张房屋结构的全景图照片，如果是专业项目开发，这个图片是会有人提供的，咱们做 demo 的话我直接在这里贴一张测试用。
代码编写
这个具体代码我就不写了，如果不知道 vue 项目中怎么接入 threejs 和初始化的话，可以参考我这个专栏的最早一篇博文。
重点是啥呢，创建一个球，然后把上面的图片当做贴图材质设置到球上面去。
let sphere_geometry = new SphereGeometry(50, 50, 50)
let texture = new TextureLoader().load(require("../../../public/imgs/house.png"))
let sphere_material = new MeshBasicMaterial({
map: texture
})
let sphere = new Mesh(sphere_geometry, sphere_material)
this.scene.add(sphere)
最后得到的效果就是这个样子了。
然后我们重新设置一下相机的位置。
camera.position.set(0, 2, 0) // 设置相机位置
这样就把视角转移到了球体内部。
看到一篇黑色，很正常，我们还需要做一步，就是把球面翻转，使贴图贴到球的内部来。
sphere_geometry.scale(1, 1, -1);
然后，就 OK 了。
好的，基本的就是这个样子。完成！