更新记录
0.01(2024-05-19) 下载此版本
uniapp里面使用threejs加载模型,支持放大缩小,拖拽,支持动画播放
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.0 | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
1、标签
<canvas type="webgl"
id="webgl"
style="width: 100%; height: 100%;position: fixed;top:0;left:0;"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
></canvas>
2、引入
import { createScopedThreejs } from '@/threejs-miniprogram'
3、onload里面
wx.createSelectorQuery()
.select('#webgl')
.node()
.exec((res) => {
const canvas = res[0].node
this.canvas = canvas
const THREE = createScopedThreejs(canvas)
renderModel(canvas, THREE)
})
注意事项:调试工具上不校验合法域名,真机上看效果请先开启调试,因为需要加载模型,如果自己开发可以把模型放在自己服务器,配置白名单域名