VR看房：全景图和移动切换的实现

本文主要是介绍VR看房：全景图和移动切换的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

---

VR看房

导读

前段时间一直在做 VR看房的全景图漫游，其中包括有一些难点，也有一些学习心得，今天在此做个总结，一来是复习，二来是在此记录下学习的过程，有些bug还未调好，在此先附上链接，看一下效果。demo

项目的gitee地址 ：https://gitee.com/shq-splendid/vronlinehouse

一.前置概念

1.OpenGL 和 WebGL

OpenGL是用于渲染 2D、3D量图形的跨语言、跨平台的应用程序编程接口 （API）。这个接口由近 350个不同的函数调用组成，用来从简单的图形比特绘制复杂的三维景象。

OpenGLES 是 OpenGL三维图形 API的子集，针对手机、 PDA和游戏主机等嵌入式设备而设计。基于 OpenGL，一般使用 C或 Cpp开发，对前端开发者来说不是很友好。

WebGL把 JavaScript和 OpenGLES2.0结合在一起，从而为前端开发者提供了使用 JavaScript编写 3D效果的能力。WebGL为 HTML5Canvas提供硬件 3D加速渲染，这样 Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D场景和模型了，还能创建复杂的导航和数据视觉化。

二.Three.js

1.概念

​ 首先来解释一下概念Three代表 3D， js代表 JavaScript，即使用 JavaScript来开发 3D效果。Three.js是使用 JavaScript对 WebGL接口进行封装与简化而形成的一个易用的 3D库，three.js在一定程度上对WEBGL进行了简化，比如一些规范和难以理解的概念等等

2.基础知识

使用 Three.js绘制一个三维效果，至少需要以下几个步骤：

• 创建一个容纳三维空间的场景 — Sence
• 将需要绘制的元素加入到场景中，对元素的形状、材料、阴影等进行设置
• 给定一个观察场景的位置，以及观察角度，我们用相机对象（ Camera）来控制
• 将绘制好的元素使用渲染器（ Renderer）进行渲染，最终呈现在浏览器上

​ 有了这些流程，就能渲染出一个简单的三维场景

三.全景图的预览

1.全景图的逻辑

对于一些基础的相机，材质，灯光的，这里就不展开过多赘述，直接进入全景图的逻辑实现，要想实现一个全景图，有许多的办法，这里只阐述一下我的实现逻辑

• 准备好一个立方体盒子（或者球体也可以），然后拍好六张全景图的图片作为材质贴在立方体的内壁上。
• 设定一个观察点，在立方体的中心
• 使用鼠标可以拖动立方体，从而改变我们看到全景的视野，也可以增加一些自动旋转等等功能
• 鼠标滚轮可以缩放，和放大，改变观察全景的远近
• 在全景图上挂载一些图标，并且可以增加事件，如点击事件

这里说一下实现的难点，实现一个简单的全景图并不难，但是如何进行全景图的切换，纹理的渐变以及和相机移动结合起来是最难实现的

2 代码实现

2.1.

定义材质，相机，骨架等等基础物体

var camera,scene,renderer,mesh_living,mesh_circle,geometry_living,geometry_circle;
var isUserInteracting=false,//用户是否交互onPointerDownPointerX = 0, onPointerDownPointerY = 0,//鼠标点击的位置lon = 90, onPointerDownLon = 0,//经度lat = 0,onPointerDownLat = 0,//维度phi = 0, theta = 0,//计算相机的位置target =  new THREE.Vector3();//三维向量
function init(){                 //初始化操作scene = new THREE.Scene();//定义相机camera = new                                                                   THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.01,10000);//相机初始位置camera.position.set(0,0,0);//定义盒子模型的骨架geometry_living = new THREE.BoxGeometry(100,100,100);//设置正方体和骨架分段数//定义行走点的骨架geometry_circle = new THREE.CircleGeometry(4,20,0,2 * Math.PI);//随机挑选一个面翻转扩大，使得贴图能够正常渲染geometry_living.scale(-1,1,1);geometry_circle.scale(-1,1,1);
}

2.2

接下来我们定义材质，一开始定义材质的方法如下，但后面为了实现纹理渐变会做改变，但可以参考

这篇关于VR看房：全景图和移动切换的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---