重力感应全景图到底怎么做啊？表示搞不出来。

Question

http://www.digitaling.com/articles/26146.html?utm_source=tuicool&utm_medium=referral

像这一种的重力感应全景图怎么做啊？
我没有做出来。请问哪位有相似的源码吗？
指点下也行啊？

Answer 1

淘宝的那个源码提供了 css3d + ori 的解决方案
他不是立方全景图的处理方式,具体细节看源码吧.

立方全景图方案

• 720yun.com

• Three.js + CSS3DRenderer +自带重力感应

• Three.js + CanvasRenderer + orienter.js

• CSS3D :基于淘宝造物节源码提供的开源项目 orienter.js 和 CSS3D引擎

推荐
Three.js 方案 Three.js + WebGLRenderer/CSS3DRenderer + orienter.js

• 优雅降级

• WebGL -> CSS3D

• IOS 8.0以上支持 WebGL

• Android 5.0 以上支持 WebGL

Answer 2

Opanorama.js 基于Threejs，同时支持手势和陀螺仪的web全景JS库。
组件地址

const panorama = new Opanorama({
    url: '',                    //全景图片
    container: document.body,   //容器
    radius: 500,                //球体半径
    fov: 90,                    //相机视角，可用于放大和缩小图片
    offsetLongitude: 0,         //经度偏移量，可用于默认展示图片位置
    offsetLatitude: 0,          //纬度偏移量，可用于默认展示图片位置
    supportTouch: true,         //是否支持手指滑动
    supportOrient: true         //是否支持陀螺仪
});