主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
如何在小程序中使用threejs?下面这篇文章就和大家聊聊在微信小程序中使用threejs的方法,希望对大家有所帮助!
微信小程序本身提供了适配版本,但版本太旧,适配不完整。尝试手动调整它。这是three js https://github . com/we chat -mini program/three js -mini program的官方github链接。
该效果显示了改编后的小程序代码片段https://developers.weixin.qq.com/s/y5tDPImr7xvs.
1.只需使用GitHub地址:https://github.com/mrdoob/three.js,并下拉整个项目,其中的代码需要稍后修改。构建目录中有三个编译后的文件。由于大小超过500k,es6将被跳过到es5,并且three.module.js无法使用。为了方便调试,未压缩的three.js将放入项目中。试着引用。
将*作为三个从& # 39;../libs/three . js & # 39;报告错误!!!
经测试是基础库最新版本的bug,反馈到官方微信地址(https://developers . weixin . QQ . com/community/develop/doc/0002 ca 77 aa 420880162 D1 b 08 D5 b 800),官方人员很快解决了问题。
实际上,如果没有解决也没有关系,但可以通过将版本库的版本降低到2.19.6或使用require的导入来解决。
解决报错问题1。由于引用的代码太旧,立方体几何中报告了一个错误
搜索发现这个CubeGeometry早就改名了。
更新日志:https://github.com/mrdoob/three.js/wiki/Migration-Guide
问题2 addEventListener报告了一个错误
微信小程序没有addEventListener,会自动管理canvas的重载,在three.js中注释掉以下代码
_ canvas . addevent listener(& # 39;webglcontextlost & # 39,onContextLost,false);_ canvas . addevent listener(& # 39;webglcontextrestored & # 39,onContextRestore,false);问题3:画布类型-6有问题-
仔细看代码会发现它是_canvas.getContext .这里有一个错误,类型更改为webgl。
const context = _ canvas . get context(& # 39;webgl & # 39,context attributes);使用微信小程序的画布有两种方法。webgl和2d,2d不代表webgl2。
常量上下文名称=
我在调试手机时发现了一个警告。不支持EXT_blend_minmax扩展名。看看代码,这是一个用三个js报告的错误。仔细找一下
MDN地址:https://developer.mozilla.org/en-us/docs/web/API/ext混合最大值。
我发现这是两个常量,在webgl2中默认支持它们。
interface EXT _ blend _ minmax { const GLenum MIN _ EXT = 0x 8007;const GLenum MAX _ EXT = 0x8008};您可以在代码中直接将其更改为相应的值。如果要删除警告,大约需要12551行。
2.使用TextureLoader解决错误问题1 createElementNS
仔细看看逻辑:texture loader -》image loader -》CreateElement NS。
微信小程序没有createElementNS。在搜索了一个圆后,我发现了一个替代方法,即canvas的createImage。但是我在哪里可以买到画布呢?没有办法直接创建。为了方便起见,只需在new TextureLoader时传递它。请注意,第一个参数是有意义的。空着传就是了。
Const纹理=新三。TextureLoader(未定义,画布)显示了解决方案,您可以使用texture。
3.使用OrbitControls解决错误问题1 addEventListener
微信小程序没有addEventListener,但是可以在canvas上绑定事件,仔细查看点事件和小程序对应的事件。
上下文菜单//鼠标右键滚轮//滚动keydown //键盘事件//指针down -》touchstartpointermove -》touchmoveinterpup -》触摸问题2。当事件被触发时,我如何通知OrbitControls?这两种方法之间没有联系,所以只能使用eventbus,它可以自己编写一个简单的。Index.js(触发器)
ontouchstart(e){ event bus . dispatch event(e)},Ontouchmove(e){ event bus . dispatch event(e)},Ontouchend(e ){ event bus . dispatch event(e)},Orbit Controls.js(监控)
event bus . addevent listener(& # 39;touchstart & # 39,onPointerDown);event bus . addevent listener(& # 39;触摸端& # 39;,onPointerUp);event bus . addevent listener(& # 39;触摸移动& # 39;,onPointerMove);问题3:触摸事件触发的参数与h5获取的数据格式不一致,需要调整。搜索了很久,我发现微信游戏、developers.weixin.qq.com/minigame/de这里有一些很适合的东西…
还有,在这篇文章中,我弟弟自己写的库应该是根据上述微信游戏的改编库从developers.weixin.qq.com/community/d更改而来的…
我直接使用TouchEvent来查看如何将其更改为pointEvent。
问题4:不可能旋转才能看到打印。应该是有一些参数导致scope.object.position被计算为NaN。
筛选流程:
位置-》偏移-》球形-》球形三角形-》客户端高度
ClientHeight和clientWidth需要赋值。
canvas . client height = canvas . height canvas . client width = canvas . width;问题4:不能缩放以查看打印,或者scope.object.position是否计算为NaN?
筛选流程:
位置-》偏移-》球形。半径-》刻度-》指针
发现指针Id属性丢失,applet事件返回一个标识符,该标识符为指针Id。
修改的属性总数:
1 . timestamp 2 . pointer type Take touch 3。点按以进行最后一次触摸阵列4。指针标识符触摸时,该标志是一个点击5。clientHeight4使用OBJLoader解决错误问题1请求和获取未定义。Ed微信小程序只有wx.request就在上面,我们找到了一个XMLHttpRequest.js的适配文件,可以使用。经过尝试,我们发现它不能直接使用,需要编译成es5。在第一步中,我们提取了整个threejs项目的代码,其中包含可以重新编译的命令。我们可以复制XMLHttpRequest,修改它,然后编译它。主要修改方法如下:
const request = new XMLHttpRequest();request . open(& # 39;GET & # 39,网址);请求。onreadystatechange = function(){ }请求。onerror()请求。send()问题2模型的默认显示太小。我认为它没有得到适当的调整,而且装载有问题。看了很久,发现已经显示出来了,只是太小了。解决方案:放大。
roup . scale . set(30,30,30)问题3:模型很暗,你需要把光照强度调得很高才能看清楚。示例中没有添加这一行代码。
renderer . output encoding = three . srgb encoding;稍微讲一下颜色空间的概念:线性空间:机器对亮度的感知非线性(Gamma):人对亮度的感知。
处理:sRGB(导入图片)-》线性(处理时)-》sRGB(输出显示)
上图中,下面的实线是实际显示器的亮度和颜色的系数图。如果没有错误,则不需要伽马校正,但实际上,线性空间中计算的照度的中间亮度部分将变暗,因此需要伽马校正,并且原始值将被提高以进行显示。
显示
5真机调试真机调试2.0支持画布
解决问题问题1模型太大,无法放到网上,放在GitHub上,你可以访问raw.githubusercontent.com请求资源。
问题2 githubusercontent访问不稳定,经常挂在代码云上,代码云也有一个访问资源的原始地址。
问题3:代码云大于1m的资源需要登录
最后,选择使用云,有免费空间可以使用。也就是说,如果你没有自己的域名,测试域名的有效期只有一个月,就在你申请域名、绑定域名、修改cname、上传模型、访问模型、申请免费证书、使用https访问域名、获得域名之前。
总结微信小程序适配threejs时的注意事项:
事件系统、事件触发器和事件参数
请求,
文档的属性自适应
画布上的属性调整
我在找相关问题的时候,发现了下面这位大哥。threejs包基本上都适配了,还有一个演示展示。我建议去https://github.com/deepkolos/three-platformize.看看
【相关学习推荐:小程序开发教程】
以上就是如何在小程序中使用threejs的详细内容。更多资讯请关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
- 暂无相关推荐文章
本文由主机参考刊发,转载请注明:如何在小程序中使用three js(three js微信小程序) https://zhujicankao.com/105454.html
评论前必须登录!
注册