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
}
weixin_38654348
- 粉丝: 3
- 资源: 939
最新资源
- ta-lib-0.5.1-cp311-cp311-win32.whl
- ta-lib-0.5.1-cp311-cp311-win-arm64.whl
- ta-lib-0.5.1-cp311-cp311-win-amd64.whl
- 微信小程序开发-地图定位.zip
- ta-lib-0.5.1-cp310-cp310-win32.whl
- ta-lib-0.5.1-cp313-cp313-win32.whl
- ta-lib-0.5.1-cp313-cp313-win-amd64.whl
- 这是一个基于html的心形代码.zip
- 安卓系统开发的全部教程
- ta-lib-0.5.1-cp312-cp312-win32.whl
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0