javascript 全景图 web全景

转载

桃太郎 2023-06-13 15:51:30

文章标签 javascript 全景图移动开发源码包渲染器 ide 文章分类 JavaScript 前端开发

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图片，所以包变大了。

javascript 全景图 web全景_ide

核心代码

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