利用 DeviceMotionEvent 的 DeviceMotionEvent.rotationRate ,加上 Touch交互。
基于 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
-
-
Ps 3D图层
-
Ps 2D图层,利用Ps插件 Flexify2 转为全景图
-
-
Threejs 全景参考 中 https://threejs.org/examples/?q=panorama
- css3d-engine Threejs的3D核心类库
- DeviceOrientationControls解析 Threejs的DeviceOrientationControls
-
3D建模软件 blender Maya
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,流畅。