22. WebAR那些事: 20行代码做全景

紧接上文

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

本次Demo所需二维码

本次demo已经集成到APK中,用户可以点击《全景》来体验。
22. WebAR那些事: 20行代码做全景

AR全景

环境准备

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

3D模型

这次增加了一张本地4k图片,所以包变大了。
22. WebAR那些事: 20行代码做全景

核心代码

代码参考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);
}

效果展示

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

22. WebAR那些事: 20行代码做全景

22. WebAR那些事: 20行代码做全景

畅想

体验升级

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

消费升级

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

下一回

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

上一篇:24. WebVR播放器: 在豪宅里看电影


下一篇:21. WebAR那些事: ARDemo之《天马行空》