紧接上文

AR技术，全称增强现实技术，对已有的现实世界，增加一些虚拟元素，提升用户体验。传统的内容展示无非于：图片、文字、视频等组合，随着经济、技术的发展，越来越多的用户已经不满足于现状，目前需要的是消费升级、体验升级，那么AR、VR技术运用而生。

本次Demo所需二维码

本次demo已经集成到APK中，用户可以点击《全景》来体验。

AR全景

环境准备

Demo使用r82版本，向下兼容Three.js 到http://www.threejs.org下载最新源码，这里使用three.min.js作为渲染引擎。WebVR.js WebVR的工具库，用于切换VR状态（three.js的源码包中，自己拷贝）VREffect.js WebVR的展示库，用于分屏展示（three.js的源码包中，自己拷贝）VRControls.js WebVR的控制库，用于监控陀螺仪、Camera、重力等（three.js的源码包中，自己拷贝）

3D模型

这次增加了一张本地4k图片，所以包变大了。

核心代码

代码参考Three.js，代码只需20行

var w = window.innerWidth; var h = window.innerHeight; var renderer = new THREE.WebGLRenderer(); // 创建渲染器 renderer.setSize(w, h); // 设置渲染器为全屏 document.body.appendChild(renderer.domElement); // 将渲染器添加到body上 var camera = new THREE.PerspectiveCamera(75, w / h, 0.01, 100); var effect = new THREE.VREffect(renderer); // 控制器，用来控制VR渲染 var loader = new THREE.TextureLoader(); // 加载器，用于异步加载图片 var control = new THREE.VRControls(camera); // 控制器，用来控制摄像机 var mater = { map : new THREE.TextureLoader().load('map.jpg'), side : THREE.BackSide }; var earth = new THREE.Mesh(new THREE.SphereGeometry(20, 32, 32), new THREE.MeshBasicMaterial(mater)); var scene = new THREE.Scene(); // 创建场景 scene.add(earth); // 添加全景球形纹理 animate(); function animate() { effect.requestAnimationFrame(animate); control.update(); effect.render(scene, camera); }

效果展示

我有一间小木屋，面朝大海，春暖花开

畅想

体验升级

沉浸式体验，可以让用户更加方便的感受照片。相比传统的照片浏览方式，左右滑动、上下滑动，每张照片展示的只是一个角度。对于用户来说，展示的思路并不连贯，需要用户在脑海中二次加工，才能生成完整的场景。

消费升级

相机与照片，交卷与相片，相辅相成。以前拥有一台柯达傻瓜相机，是一件非常幸福的事情。后来是单反，拍出更加清晰的电子照片。再后来是全景相机，360°球形照片。随着人们的消费升级，不禁的会问：花了这么多钱，你就给我看这个？这种问题，在每个时代的末期，都会有人提出。我们现在就处于传统2D电子照片的末期，新的时代马上就会来临。

下一回

手把手做一个VR视频播放器，要支持在线URL输入播放的那种。敬请期待

相关资源：720度全景场景HTML5源码,直接在浏览器中运行