紧接上文
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输入播放的那种。
敬请期待
