了解一些技术背景，我们就是开始今天的分享吧。我们回顾一下我们会采取什么技术来实现 Web VR 呢。这里也有许多流行的框架收纳了 three.js 提供自己的对 3D web 的解决方案。其中不少 reactjs 这样当下流行的框架。
安装 three.js 很简单，只需要引用一下，不过要看效果，需要在将 index.html 运行在一个服务中，这个做过单页应用应该不陌生。
准备就绪，我们就可以开始搭建 3D 场景了。
我们在 body 创建一个 div 容器作为 canvas 的载体，所有的绘制都这个 canvas 中完成。
首先我们创建一台摄像机，作为我们观察场景的视角，也就是在 web 内容。在开始摄像机前，我们需要对摄像机的成像机制有些了解，如果您是一个摄影爱好者或熟悉 3d 软件的动画制作者，这些对您应该不算事。
透视相机在 ThreeJs 里面对应的类是 THREE.PerspectiveCamera，这个类需要4个参数：视角、近平面距离、远平面距离、宽高比。如果在加上相机的位置和相机照相的方向（lookAt）就可以在三维空间中唯一确定一个空间，出现在这个空间的物体最后就会被渲染出来（近大远小）。
创建好摄像机，我们还需创建一个 sence （场景），作为一个容器，我们的角色和道具都会放到 sence 中。
然后创建我们环境，环境是一个全景图，用球形摄像机拍摄的，然后将这个图片赋予一个球体，这个球体将摄像机包裹在其中，最后通过移动摄像机来实现在这个客厅中切换。
SphereBufferGeometry(radius :Float, widthSegments :Integer, heightSegments :Integer, phiStart :Float, phiLength :Float, thetaStart :Float, thetaLength :Float)
球体第一个参数为半径，第二个，第三个参数为细分，细分越多渲染效果越好，同时也需要浩资源。
创建好了环境，需要添加一些道具，如指南针呀，小地图导航，互动菜单到场景去，先创建一个立方体，观察一下，这个立方体仅是如下图。
每一个物体，通常包含两个部分，一个就是几何体形状和大小，我们这里定义一个boxBufferGeometry, 为box，也就是立方体，然后定义他长宽高，然后在定一种材质，大家不要简单将他认为他为颜色或贴图，他还有对光反应，是一种材质。最后将材质和结构组合为 mesh 放到场景中。
接下来我们还需要地面上放置一个指南针，我们创建一个 plane 然后在 plane 方一张透明贴图，这个留给大家自己思考下，下一节给出答案。如图
我们需要绘制一个地面，与我们环境拟合，然后将一些物品放置这个平面，这个平面还可以接受一些物体的投影接受他们的shadow，如果您有 3d 背景这个应该不难理解。今天就到这里... 感谢您支持！
