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

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

var materials = [

   loadTexture( 'picture/right.jpeg' ), // right
   loadTexture( 'picture/left.jpeg' ), // left
   loadTexture( 'picture/top.jpeg' ), // top
   loadTexture( 'picture/bottom.jpeg' ), // bottom
   loadTexture( 'picture/front.jpeg' ), // back
   loadTexture( 'picture/back.jpeg' )  // front

    //这里着重说下一个发现，加载图片的顺序不管是盒子模型还是其他方法，都是这个顺序，右左上下前后