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

246 阅读1分钟

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

在这里插入图片描述

好的,基本的就是这个样子。完成!