如何在小程序中使用three js（three js微信小程序）

如何在小程序中使用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的详细内容。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：如何在小程序中使用three js（three js微信小程序） https://zhujicankao.com/105454.html