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

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

VR看房

导读

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

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

文章目录

VR看房
- 导读
- 一.前置概念
- 二.Three.js
- 三.全景图的预览
- - - **1.全景图的逻辑**
    - **2 代码实现**
    - - 2.1.
      - 2.2
      - 2.3
      - 2.4
      - 2.5
      - 2.6
- 四.事件绑定
- - - 1.白点的添加
    - 2.点击事件的绑定
    - - 2.1 逻辑
      - 2.2 代码实现
- 五.场景切换
- - - 1.尝试
    - 2.逻辑
    - 3.实现
    - - 3.1 自定义着色器
      - 3.2 tween.js
      - 3.2.1控制动画
        3.2.2 实现
    - 4 fov尝试
- 六总结
- - - 一收获
    - 二不足

一.前置概念

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);
}