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

2021-10-13 01:57:32

紧接上文

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

码农公寓