快速解析小程序中如何使用Threejs（小程序中引入第三方js）

如何在我的小程序中使用Threejs？下面的文章将介绍如何在微信小程序中使用Threejs。 希望对你有帮助！

微信小程序本身提供了适配版本，但是版本太旧，所以适配不完整。 尝试自己手动调整。 这是适配twojs的官方github链接 https://github.com/wechat-miniprogram/thirdjs-miniprogram

效果展示

适配的小程序代码片段https://developers.weixin. qq.com/s/y5tDPImr7xvs

1.简单使用

在GitHub地址上拉取整个项目：https://github.com/mrdoob/ Three.js。 您稍后需要修改代码。 build目录下已经有3个编译好的文件了。 由于大小超过 500k，因此将跳过 es6 到 es5 的转换，并且 Three.module.js 将不可用。 为了更轻松地调试并查看错误所在，请将解压缩的 Three.js 放入您的项目中。 。 请尝试引用它。

从'../libs/third.js'导入*作为三

错误！ ！

测试表明这是最新版本的基础库中的一个错误。 我们已向微信反馈地址（https://developers.weixin.qq.com/community/develop/doc/0002ca77aa420880162d1b08d5b800）提交正式反馈。 官方工作人员很快就解决了这个问题。

其实，没有也没关系。 影响：您还可以通过将存储库版本降低到 2.19.6 或使用 require import 来解决该问题

解决错误问题 1 CubeGeometry 错误报告，因为参考代码太旧

经过搜索，发现这个CubeGeometry很早之前就被重命名了。

更新日志：https://github.com/mrdoob/ Three.js/wiki/Migration-指南

问题2 addEventListener报错

微信小程序有addEventListener自动管理canvas重新加载。 在 Three.js 中注释掉以下代码。

_canvas.addEventListener('webglcontextlost', onContextLost, false );_canvas.addEventListener('webglcontextrestored', onContextRestore, false); 问题3 画布类型有问题。

代码仔细看会发现_canvas.getContext报错，类型为webgl 我发现已经改成.

const context = _canvas.getContext('webgl', contextAttributes);

微信小程序中使用canvas有两种方式：webgl和2d。 2d 并不意味着 webgl2。

const contextNames = [ 'webgl2', 'webgl', 'experimental-webgl'];

contextNames 中没有 2D。 代码中只有与图像相关的方法才使用 2D。 解决了以上问题后，就可以开始跑步了。

显示

在手机上调试时，我收到一条警告，提示不支持 EXT_blend_minmax 扩展。 看代码，这是twojs报的错误。 请仔细搜索。

MDN地址：https://developer.mozilla.org/en-US/docs/Web/API/EXT_blend_minmax

可以看到我这是两个常量。做过。 webgl2，

interfac默认支持。e EXT_blend_minmax {const GLenum MIN_EXT = 0x8007; const GLenum MAX_EXT = 0x8008;};

您可以直接将其更改为代码中的相应值。 如果要删除警告，请在第 12551 行附近。

2. 使用TextureLoader解决错误问题。 1 createElementNS

仔细看逻辑：TextureLoader-> ImageLoader->createElementNS

微信小程序没有createElementNS。 经过一番研究，我发现了另一种方法。 它是Canvas createImage，但是我在哪里可以获得Canvas？ 没有办法直接创建一个。 为了方便起见，您可以直接使用 new 创建。 传递TextureLoader 时，请注意第一个参数很重要。 把它留空即可。

consttexture = new THREE.TextureLoader(unknown, Canvas) 显示

已解决。 使用纹理

3.使用OrbitControls解决错误报告问题。 1 addEventListener

微信小程序没有addEventListener，但是可以在画布上绑定事件。 请仔细查看活动和小程序对应的活动。

contextmenu // 鼠标右键滚轮 // 滚轮滚动 keydown // 键盘事件 // 需要调整的指针向下 -> touchstartpointermove -> touchmovepointerup -> touchend 问题 2 事件触发 怎么办事件发生后我如何通知 OrbitControls

事件已发生？ 两种方法之间没有任何联系，所以只能使用事件总线。，您可以轻松地自己编写事件总线。 Index.js（触发器）

onTouchStart(e) { EventBus.dispatchEvent(e) }, onTouchMove(e) { Even tBus.dispatchEvent(e) }, onTouchEnd(e) { EventBus.dispatchEvent(e) },

OrbitControls.js（监听）

EventBus.addEventListener( 'touchstart', onPointerDown );EventBus.addEventListener( 'touchend', onPointerUp );EventBus.addEventListener( 'touchmove', onPointerMove); 问题3 触摸事件触发的参数问题（小） 通过程序事件触发器获取 参数没有与h5检索到的数据格式匹配，必须进行调整。

找了很久，发现有一些很适合微信小游戏的。 developers.weixin.qq.com/minigame/de...

本文也是兄弟们自己写的。 库要根据上面的微信小游戏适配库进行修改。 developers.weixin.qq.com/community/d...

我是直接使用TouchEvent。 让我们看看如何更改它。 转换为pointEvent

问题4 无法旋转

看打印输出。 某些参数可能存在问题，导致scope.object.position计算为NaN。

排查流程：

position->offset->spherical->sphericalDelta->clientHeight

clientHeight和clientWidth必须是分配一个值

p>canvas.clientheight = canvas.heightcanvas.clientwidth = canvas.width; 问题4 无法缩放

验证打印或scope.object.position计算为NaN。

排查过程：

position->offset->spherical.radius->scale->pointers

pointerId属性为发现丢失并且小程序事件返回一个标识符。 pointerId

更改的属性总数：

1.timeStamp2。 pointerType接收touch3。 多点触摸时 Click 获取触摸数组中的最后一个 4.pointerId 标识符 多点触摸时，标识符为 click 5.clientHeight4 使用 OBJLoader 解决错误问题 1 请求和获取未定义

只有微信小程序wx.请求。 上面我们看到有一个XMLHttpRequest.js的适配文件可以使用。 我尝试了一下，发现不能直接使用，需要编译成es5。 第一步是拉取整个 Threejs 项目的代码，包括重新编译的命令。 您可以复制、修改、使用和编译 XMLHttpRequest。 主要变化如下。

const request = new XMLHttpRequest( );request.open('GET', url);request.onreadystatechange = function () {}request.onerror()request.send()问题2 模型的默认显示太小了。

我以为它可能还没有被应用，但是加载它时出现了问题。 我一直看着它，它已经在那里了，但它太小了。 解决方案：扩大组。

scale.set(30,30,30) 问题3 模型显得很暗，需要将光照强度调高才能看清楚。

参见示例。 这行代码没有添加。

renderer.outputEncoding = THREE.sRGBEncoding ;

我们来了解一下颜色空间概念：线性空间：机器亮度感知非线性（gamma）：人类亮度亮度的识别

处理：sRGB（导入图像）-> 线性（处理）-> sRGB （输出显示）

上图最下方的实线是实际显示的亮度和色彩系数图。 如果没有错误，就不需要伽玛校正，但实际上是必要的，因为线性空间中计算的照明的中间亮度部分会变暗，并增加显示的原始值。

参考文章https://www.cnblogs.com/guanzz/p/7416821.htmlhttps://cloud.tencent.com/developer/article/1543647查看

5实际设备调试

真机调试2.0支持canvas

解决问题1 模型太大

只能放到网上，部署在GitHub上。 您可以通过访问 raw.githubusercontent.com 来请求资源。

问题2 访问githubusercontent不稳定，经常挂掉。

放入码云。 码云还有访问资源的原始地址。

问题3大于1m的码云资源必须登录。

最后选择使用有可用空间的特定云。 这意味着，如果您没有自己的域名，您的测试域名的有效期只有一个月。 之前申请了域名，绑定了，改了cname，上传了模型，现在可以访问了。 一旦您申请了免费证书，https 将能够访问您的证书，您就完成了。

概述

微信小程序适配Threejs时的注意事项：

事件系统、事件触发、事件参数

请求、

在文档上调整属性

在画布上调整属性

在搜索相关问题时，我发现了以下人员： 基本上，所有的三个js包都被应用了。 有演示展示。 推荐查看https://github.com/deepkolos/ Three-platformize

【相关学习推荐：小程序开发教程】

。 PHP快速学习视频免费教程（从初学者到大师）

如何开始学习PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

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

• 快速说明如何确保小程序各页面已登录（登录小程序后进入首页）
• 记录一下你的实践，看看如何优化你的小程序购物车动画。
• 快速解析小程序中如何优雅地实现模块化？（小程序中的模块）
• 微信卡包如何跳转到小程序？浅析如何实现（如何开启微信卡包功能）
• 如果我的小程序大小超出了限制，除了外包还能做什么？如何避免和解决大小限制？

本文由主机参考刊发，转载请注明：快速解析小程序中如何使用Threejs（小程序中引入第三方js） https://zhujicankao.com/142657.html