three.js实现炫酷的全景3D重力感应 - CSDN文库

60 浏览量更新于2023-03-03 评论 3 收藏 95KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

评论0

weixin_38654348

粉丝: 3
资源: 940

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈