# vue 使用 threejs 实现实景看房效果 demo

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 了。

好的，基本的就是这个样子。完成！