<think>我们正在使用微信小程序，并且需要
加载GLB格式的3D模型，同时需要监听
加载进度。由于微信小程序环境特殊，我们需要使用小程序的
WebView或者直接在小程序中集成Three.js。但是，微信小程序本身不支持直接使用Three.js，因此我们需要使用小程序的三维引擎（如：web-view组件内嵌H5页面，或者使用小程序的同层渲染功能）。考虑到性能和小程序的能力，我们可以选择：1.使用web-view组件嵌入一个H5页面，在该H5页面中使用Three.js
加载模型并监听进度。然后通过小程序与H5的通信机制（如JSSDK）将进度传回小程序。2.使用微信小程序自己的3D渲染引擎（如使用<live-pusher>的同层渲染？），但是官方提供了WebGL画布的支持，可以通过threejs的微信小程序版本（如weapp-threejs）来实现。然而，根据引用[3]，我们注意到在H5中，使用Three.js的OrbitControls可以控制相机，并重新渲染。但是，在小程序中，我们需要适配。另外，引用[2]提到了在H5中调用微信小程序的JSSDK来实现H5和小程序的通信，我们可以使用这种方式来传递
加载进度。但是，如果我们希望完全在小程序内部实现，而不使用web-view，那么我们可以使用小程序自己的WebGL上下文。幸运的是，已经有社区项目将Three.js适配到了微信小程序，例如：weapp-threejs（注意：这个库可能需要在小程序环境中使用，并且它支持
加载GLB模型并监听进度）。因此，我们有两种方案：方案一：使用web-view内嵌H5页面步骤：1.在小程序中创建一个web-view，指向我们的H5页面。2.在H5页面中，使用Three.js
加载GLB模型，并使用THREE.LoadingManager来监听
加载进度。3.在H5页面中，使用微信的JSSDK（如wx.miniProgram.invoke）将进度信息发送给小程序。方案二：在小程序内部集成Three.js（推荐使用社区适配的版本）步骤：1.在项目中引入weapp-threejs（或者其他适配小程序环境的threejs库）。2.使用小程序的画布（Canvas）组件，并设置type为webgl。3.使用Three.js的API
加载GLB模型，并监听
加载进度。由于方案二性能更好，且无需跳转H5，故推荐方案二。下面我们详细介绍方案二的实现步骤：1.首先，在微信小程序项目中引入three.js的适配版本，例如：使用npm安装（需要开启小程序npm支持）或者直接下载构建好的three.js文件。可以使用：`npminstallthree-weapp`或者`npminstallweapp-threejs`2.在小程序的页面对应的json文件中引入threejs组件（如果使用npm，需要构建npm）3.在页面的wxml中添加一个Canvas画布，并设置type为webgl：```html<canvasid="webgl"type="webgl"style="width:100%;height:100%;"/>```4.在页面的js文件中，引入threejs：```javascriptimport*asTHREEfrom'three-weapp';//或者根据你安装的包名```5.创建场景、相机、渲染器等，并初始化Three.js环境。6.使用GLTFLoader
加载GLB模型（注意：GLB是glTF的二进制格式，因此可以使用GLTFLoader）。7.为了监听
加载进度，我们可以使用THREE.LoadingManager，或者直接使用GLTFLoader的onProgress回调。示例代码：```javascriptPage({data:{progress:0//用于在
界面上显示进度},onReady:function(){constcanvas=wx.createOffscreenCanvas({type:'webgl'})//或者使用选择器获取canvas节点，但注意微信小程序获取节点的方式//但是注意，微信小程序官方推荐使用选择器获取节点，然后使用createCanvasContext获取WebGL上下文//但是three-weapp库内部可能已经封装了，我们按照库的文档来//实际上，three-weapp的示例中，我们这样使用：constquery=wx.createSelectorQuery();query.select('#webgl').node().exec((res)=>{constcanvas=res[0].node;//初始化three.jsconstscene=newTHREE.Scene();constcamera=newTHREE.PerspectiveCamera(75,canvas.width/canvas.height,0.1,1000);constrenderer=newTHREE.WebGLRenderer({canvas:canvas,antialias:true});//创建
加载管理器constmanager=newTHREE.LoadingManager();manager.onProgress=(url,loaded,total)=>{//计算进度constprogress=(loaded/total*100).toFixed(0);//更新数据，显示进度this.setData({progress:progress});};//使用GLTFLoader，并传入managerconstloader=newTHREE.GLTFLoader(manager);loader.load('path/to/model.glb',//模型路径，需要在小程序中的合法域名，或者使用下载后的临时路径(gltf)=>{//模型
加载完成scene.add(gltf.scene);},//onProgress回调，也可以使用manager，这里可以不用，因为我们在manager中监听了undefined,(error)=>{console.error('
加载模型出错',error);});//渲染循环constanimate=()=>{requestAnimationFrame(animate);renderer.render(scene,camera);};animate();});}});```注意：微信小程序对文件路径有要求，需要将GLB文件放在服务器上（配置合法域名），或者先下载到本地临时路径再
加载。但是，这里存在一个问题：小程序的threejs适配库（如three-weapp）可能对GLTFLoader的支持情况？以及GLTFLoader的版本。另外，也可以不使用LoadingManager，而直接在loader.load方法中传递onProgress回调：```javascriptloader.load(url,onLoad,onProgress,//这里直接传递进度回调onError);```其中，onProgress回调函数接收一个XMLHttpRequestEventTarget事件，其loaded和total属性可用于计算进度。因此，我们可以这样写：```javascriptloader.load('path/to/model.glb',(gltf)=>{...},(xhr)=>{//计算进度constprogress=(xhr.loaded/xhr.total*100).toFixed(0);this.setData({progress:progress});},(error)=>{...});```所以，我们可以选择使用上述方式。但是，如果同时
加载多个资源，则使用LoadingManager会更方便，因为可以统一监控多个
加载器的进度。另外，请注意：微信小程序中，需要配置下载GLB模型的域名白名单（在后台设置request合法域名），或者使用下载文件API（wx.downloadFile）先下载到本地临时路径，再
加载。如果使用下载API，我们可以监听下载进度，然后再
加载到three.js中。这样可以先显示下载进度，再显示模型解析进度（但是模型解析可能也需要时间）。但是，如果我们已经将模型放在自己的服务器上，并且设置了request合法域名，那么我们可以直接通过URL
加载。综上，我们可以在小程序中这样实现：1.使用threejs的小程序适配版本（如three-weapp）。2.在页面wxml中添加canvas。3.在js中使用GLTFLoader
加载模型，并在onProgress回调中更新进度。下面是一个完整的示例代码：wxml:```html<canvasid="webgl"type="webgl"style="width:100%;height:100%;"/><view>
加载进度:{{progress}}%</view>```js:```javascript//引入Three.js，注意路径import*asTHREEfrom'three-weapp';Page({data:{progress:0},onReady:function(){constquery=wx.createSelectorQuery();query.select('#webgl').node().exec((res)=>{constcanvas=res[0].node;//初始化场景constscene=newTHREE.Scene();scene.background=newTHREE.Color(0xffffff);constcamera=newTHREE.PerspectiveCamera(75,canvas.width/canvas.height,0.1,1000);camera.position.z=5;constrenderer=newTHREE.WebGLRenderer({canvas:canvas,antialias:true});//添加光源constambientLight=newTHREE.AmbientLight(0x404040);scene.add(ambientLight);constdirectionalLight=newTHREE.DirectionalLight(0xffffff,0.5);directionalLight.position.set(1,1,1);scene.add(directionalLight);//
加载模型constloader=newTHREE.GLTFLoader();//假设模型URL，这里需要替换为实际URLconsturl='https://example.com/path/to/your/model.glb';loader.load(url,(gltf)=>{scene.add(gltf.scene);console.log('模型
加载完成');},(xhr)=>{//计算进度百分比constprogress=Math.round((xhr.loaded/xhr.total)*100);this.setData({progress:progress});},(error)=>{console.error('模型
加载失败',error);});//
动画循环functionanimate(){requestAnimationFrame(animate);renderer.render(scene,camera);}animate();});}});```注意：微信小程序中，使用网络资源需要配置合法域名。如果模型较大，下载时间较长，那么上述进度条会比较流畅。但是，如果模型在本地，或者已经缓存，则
加载很快。另外，GLTFLoader在
加载GLB时，会先下载整个二进制文件，然后进行解析。上述进度回调只能反映下载进度，并不能反映解析进度（解析进度需要使用其他方式，例如在manager中监听单个项目的解析）。但是，对于用户来说，通常只需要知道下载进度即可，因为解析通常很快（除非模型特别复杂）。因此，我们这样实现基本能满足需求。最后，请注意模型的大小和性能优化，确保在小程序中流畅运行。我们也可以使用微信小程序的下载文件API来预先下载模型，这样可以利用微信的缓存机制，并且可以监听下载进度（包括暂停和断点续传），然后再将下载后的临时路径传递给GLTFLoader。这种方法的优点是：1.可以更好地利用微信小程序的下载能力。2.可以更灵活地监听下载进度。示例代码：```javascript//先下载模型文件wx.downloadFile({url:'https://example.com/model.glb',success:(res)=>{//res.tempFilePath是下载后的临时文件路径consttempFilePath=res.tempFilePath;//然后使用GLTFLoader
加载loader.load(tempFilePath,(gltf)=>{...},(xhr)=>{...},(error)=>{...});},fail:(err)=>{...}});```但是，在下载文件的过程中，我们也可以监听下载进度：```javascriptwx.downloadFile({url:'https://example.com/model.glb',//监听下载进度success:(res)=>{...},fail:(err)=>{...},complete:()=>{...}});//同时，我们可以使用DownloadTask来监听进度constdownloadTask=wx.downloadFile({url:'https://example.com/model.glb',success:(res)=>{...}});downloadTask.onProgressUpdate((res)=>{//res.progress进度百分比//res.totalBytesWritten已经下载的数据长度//res.totalBytesExpectedToWrite总数据长度this.setData({progress:res.progress});});```这种方法的进度更加准确（因为包含了文件下载的完整过程），而且独立于Three.js的
加载过程。然后，在下载完成后，再使用Three.js
加载本地临时文件。
加载本地文件时，由于文件已经在本地，所以GLTFLoader的下载进度部分会很快（基本直接100%），然后进入解析阶段。但是，我们无法直接监听解析进度。不过，解析通常很快。因此，我们可以选择这种方式：1.使用wx.downloadFile下载模型文件，并监听下载进度，更新进度条。2.下载完成后，使用GLTFLoader
加载临时文件，此时可以设置一个固定的进度（比如100%）表示下载完成，然后模型解析完成后进入场景。但是，如果模型特别大，解析也可能需要时间，用户可能会觉得卡在100%不动。因此，我们可以考虑在开始解析时显示“解析中...”，但需要修改
加载过程。不过，一般来说，如果模型在移动端已经优化过，解析不会太久。综上所述，我们可以结合两种方案：1.使用下载任务监听下载进度（0-100%）。2.下载完成后，使用Three.js
加载，这时候显示“
加载模型...”并等待
加载完成（即解析完成）。但是，为了简单，我们可以在下载进度到100%后，开始
加载模型，此时进度条变为100%，然后
加载模型时我们显示一个提示（如“
加载中...”），直到模型显示。所以，具体选择哪种方式取决于需求。这里，我们给出一个使用下载任务下载模型，然后使用Three.js
加载的方案：```javascriptPage({data:{progress:0,status:'正在下载模型...'},onReady:function(){//...初始化场景，与前面一致...//下载模型文件consturl='https://example.com/model.glb';constdownloadTask=wx.downloadFile({url:url,success:(res)=>{//下载完成后，使用GLTFLoader
加载this.setData({status:'正在
加载模型...'});constloader=newTHREE.GLTFLoader();loader.load(res.tempFilePath,(gltf)=>{scene.add(gltf.scene);this.setData({status:'
加载完成'});},undefined,//不使用
加载进度，因为文件已经在本地，下载部分瞬间完成(error)=>{console.error('
加载模型失败',error);this.setData({status:'
加载失败'});});}});downloadTask.onProgressUpdate((res)=>{//更新下载进度this.setData({progress:res.progress});});}});```这样，我们可以实现：下载过程中显示下载进度（0-100%），下载完成后开始
加载模型，此时进度条到100%，然后显示“正在
加载模型...”，直到模型
加载完毕。这个方案的优点是下载进度准确，并且分离了下载和解析过程。但是，如果希望模型
加载（解析）的进度，目前Three.js没有提供解析进度的回调。因此，我们只能等待。因此，我们采用这个方案来实现。总结：在微信小程序中
加载GLB模型并监听进度，我们推荐使用先下载模型文件（使用wx.downloadFile并监听进度），下载完成后再用Three.js的GLTFLoader
加载，并给出解析中的提示。注意：使用wx.downloadFile需要在小程序后台配置下载域名白名单。希望这个回答能够帮助到你。§§相关问题§§1.微信小程序中如何配置下载文件的合法域名？2.使用threejs在小程序中
加载GLB模型出现跨域问题怎么办？3.微信小程序中如何优化大型GLB模型的
加载性能？</think>
在微信小程序中
加载 GLB 模型并监听
加载进度，可以通过 Three.js 的微信小程序适配版本来实现。以下是完整的解决方案：
### 解决方案
微信小程序本身不支持 WebGL 的原生调用，需要使用适配版本的 Three.js（如 `three.js-miniprogram`）。以下是关键代码实现：
```javascript
// 1. 安装依赖（小程序npm支持需开启）
npm install three@0.125.2-miniprogram
// 2. WXML 文件
<canvas id="webgl" type="webgl" style="width: 100%; height: 100vh;" />
// 3. JS 文件
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { WechatPlatform } from 'three-platformize-wechat';
Page({
data: { progress: 0 },
onReady() {
// 初始化Three.js平台
const platform = new WechatPlatform(wx, this);
platform.enableDeviceOrientation();
THREE.Platform.set(platform);
// 获取Canvas节点
wx.createSelectorQuery()
.select('#webgl')
.node()
.exec((res) => {
const canvas = res[0].node;
this.initScene(canvas);
});
},
initScene(canvas) {
// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
// 创建
加载管理器（核心进度监听）
const manager = new THREE.LoadingManager();
manager.onProgress = (url, loaded, total) => {
const progress = Math.round((loaded / total) * 100);
this.setData({ progress }); // 更新小程序UI
};
//
加载GLB模型
const loader = new GLTFLoader(manager);
loader.load(
'https://example.com/model.glb', // 替换为实际URL
(gltf) => {
scene.add(gltf.scene);
this.setData({ status: '
加载完成' });
},
undefined,
(err) => console.error('
加载失败:', err)
);
// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
// 渲染循环
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
}
});
```
### 关键技术点
1. **进度监听原理**：
- 通过 `THREE.LoadingManager` 的 `onProgress` 回调
- 计算公式：`进度百分比 = (已
加载数/总资源数) * 100`
2. **小程序适配**：
- 使用 `three-platformize-wechat` 库桥接小程序API
- 需注册为微信小程序的第三方平台（[查看文档](https://github.com/wechat-miniprogram/three-platformize)）
3. **模型
加载**：
- GLB 作为二进制格式需配置域名白名单
- 小程序的云存储路径可直接使用 `cloud://` 协议
### 注意事项
1. **性能优化**：
```javascript
// 模型压缩（推荐）
loader.setDRACOLoader(new DRACOLoader());
loader.load( /* ... */ );
// 分块
加载（大模型适用）
loader.parseChunked(data, (gltf) => { /* ... */ }, 1024 * 1024); // 1MB/块
```
2. **常见错误处理**：
- `ERR_REQUEST_FAILED`：检查域名白名单（需HTTPS）
- `WebGL not supported`：确认小程序的 `type="webgl"`
- 内存溢出：使用 `scene.remove()` 及时清理模型
3. **UI示例**（进度条）：
```html
<progress percent="{{progress}}" show-info />
<text>{{progress}}%
加载中...</text>
```
### 其他方案对比
| 方案 | 优点 | 缺点 |
|------|------|------|
| Three.js 小程序版 | 完整3D功能支持 | 包体积较大（≈500KB） |
| 微信原生3D引擎 | 无额外依赖 | 功能有限，仅基础渲染 |
|
WebView嵌入H5 | 开发简单 | 性能差，无法同层交互 |
> **提示**：如果模型小于5MB，建议使用小程序本地缓存路径提升
加载速度：
> ```javascript
> wx.downloadFile({
> url: 'https://.../model.glb',
> success: (res) => loader.load(res.tempFilePath) //
加载本地缓存
> })
> ```
实际效果演示（需真机调试）：
[^1]
---
本文记录了一个关于界面图片旋转动画在特定情况下出现白点的问题，并分享了解决方案。问题发生在从Webview返回主界面时，仅在部分设备如中兴Z9上出现。通过关闭Webview所在Activity的硬件加速器成功解决了该问题。
扫一扫
1340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
