WebVR即web + VR的体会办法，本文介绍怎么开发一个WebVR网页，在此之前，咱们有必要了解WebVR的体会办法。
如运用cardboard眼镜来体会手机阅读器的webVR网页，阅读器将依据水平陀螺仪的参数来获取用户的头部歪斜和滚动的朝向，并奉告页面需求烘托哪一个朝向的场景。
除了VR形式下的体会办法，这儿还考虑了裸眼下的体会阅读网页的办法，在PC端假如勘探的用户挑选进入VR形式，应让用户能够运用鼠标拖拽场景，而在智能手机上则应让用户能够运用touchmove或旋转歪斜手机的办法来改动场景视角。WebVR的概念大约就如此，这次咱们将选用cardboard + mobile的办法来测验咱们的WebVR场景，现在踏上咱们的开发之旅。
Three.js是构建3d场景的结构，它封装了WebGL函数，简化了创立场景的代码本钱，运用three.js咱们能够更高雅地创立出三维场景和三维动画，这儿我运用的是0.86版别。 假如想了解纯WebGL开发WebVR运用以及WebVR详细环境装备，能够参阅webvr教程--深度分析。
Three.js中的camera相机代表用户的眼睛，咱们经过设置FOV确认视界规模，
动画烘托的原理：烘托器的继续调用制作办法，办法里动态改动物体的特点。 旧版的three.js需求手动调用requestAnimationFrame()办法递归的办法来烘托动画，新版three.js现已封装了该特点，因而只需求经过烘托器renderer.animate(callback)。
至此，咱们现已制作了一个简略的3d场景而且让它动了起来，接下来，咱们需求让咱们的场景能够支撑WebVR形式。
运用navigator.getVRDisplays获取vr设备实例vrdisplay，咱们需求将它传给当时运转的renderer烘托器，当点击按钮时能够进入VR形式，再次点击退出VR形式。
第一步，结构函数先初始化VR场景、相机和烘托器；第二步，在烘托之前调用start办法，在start办法里咱们为场景创立3d物体；最终，调起renderer.animate(this.update)敞开动画烘托，update办法里咱们可动态操作物体特点，详细代码如下：
结语：现在，国外的谷歌、火狐、Facebook和国内百度已推出支撑WebVR阅读器的版别，微软也宣告将推出自己的VR阅读器，跟着后期5g网络极速年代的到来以及HMD头显的价格和渠道的老练，WebVR的体会办法将是革命性的，用户经过WebVR阅读网上商店，线上教育可进行“面对面”师生沟通等，根据这种种运用场景，咱们能够找到一个更好的动力去学习WebVR。
南宫体育
