Panorama全景

实现

DeviceMotionAndOribitControls.js

利用 DeviceMotionEvent 的 DeviceMotionEvent.rotationRate ，加上 Touch交互。

DeviceOrientAndOribitControls.js

基于 OrbitControls ，加上 DeviceOrientation ，但是目前存在问题万向节死锁（待解决）。

DeviceOrientationControls.js + Photo Sphere Viewer

利用 DeviceOrientationControls.js 完成陀螺仪转动 Photo Sphere Viewer 完成touch交互(但是无法上下交互) demo

方法

• div + Css3 实现
  • 图片是围成了一个圆筒 参考 http://show.im20.com.cn/zwj/ http://shrek.imdevsh.com/demo/kfc/
  • 图片是分为了6张组成一个球 参考 https://threejs.org/examples/?q=pano#css3d_panorama_deviceorientation
• Canvas Webgl 参考 https://threejs.org/examples/?q=pano#canvas_geometry_panorama

技术要点

重力传感器和方向传感器都是派生传感器。重力传感器基于加速度传感器；方向传感器主要基于陀螺仪和磁力计，但主要还是基于陀螺仪。

• Three.js: rotate camera with both touch and device orientation

• OrbitControls and DeviceOrientationControls

• 欧拉角

• Coordinate Systems in Two and Three Dimensions

• 设备屏幕方向与运动

• 制作全景图教程

  • Ps 3D图层

  • Ps 2D图层，利用Ps插件 Flexify2 转为全景图

JS插件：

• Threejs 全景参考 中 https://threejs.org/examples/?q=panorama

  • css3d-engine Threejs的3D核心类库
  • DeviceOrientationControls解析 Threejs的DeviceOrientationControls

• Pannellum

工具

• 3D建模软件 blender Maya

• 在线建模 three.js / editor ThreeFab

实测

Canvas渲染，即new THREE.CanvasRenderer(); ，利用 Canvas 2D Api。手机端效果极其不好，iphone6s fps不到10。

WebGL渲染，即new THREE.WebGLRenderer();，利用 GPU渲染的着色器。手机端性能不错，iphone6s fps30-60，无明显卡顿。

CSS3 3D渲染，即new THREE.CSS3DRenderer();，利用 CSS3 3d transform，同样利用GPU加速。手机端效果不错，iphone6s fps60，流畅。

参考

高冷的WebGL

threeVR

3D图形:矩阵、欧拉角、四元数与方位的故事

Web方向传感器的正确使用姿势