three.js实现炫酷的全景实现炫酷的全景3D重力感应重力感应
本文实例为大家分享了three.js 全景重力感应的具体代码，供大家参考，具体内容如下
实现实现three.js 全景图全景图 demo
使用three.js 写了球体和圆柱体版本的3D重力感应全景图，支持手指触摸和陀螺仪感应，也支持PC端的鼠标。给大家介绍一
下基于移动端H5球体的实现方法，圆柱体类似。
设置容器和展示的样式设置容器和展示的样式
设置容器的宽高为全屏展示，清除body的margin,引用three.min.js（3D渲染框架） 和orienter.js (陀螺仪经纬度计算)
<div id="CanvasBody"></div>
<script src="js/three.min.js"></script>
<!--重力感应-->
<script src="js/orienter.js"></script>
<!--动画效果-->
<script src="js/tween.js"></script>
<!-- 代码 -->
body {margin: 0;}
html, body, #CanvasBody {width: 100vw;height: 100vh;overflow: hidden;}
#CanvasBody {position: relative;}
设置设置html的的data-dpr 属性，设置属性，设置html 的的fontSize
设置html的fontSize,重新计算body的实际可展示尺寸，这样可以使渲染出来的画面更清晰，分辨率最完美。
(function(_window) {
var navigatorUserAgent = navigator.userAgent;
var iPhone = navigatorUserAgent.indexOf("iPhone");
if (iPhone > -1) {
var dpr = Number(window.devicePixelRatio),
one_dpr = 1 / dpr
} else {
var dpr = 1,
one_dpr = 1
}
评论0