wechat-miniprogram / threejs-miniprogram 挖坑教程实录

最新推荐文章于 2025-10-23 01:41:00 发布

原创最新推荐文章于 2025-10-23 01:41:00 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #three.js

小程序专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在小程序中使用WebGL进行模型渲染，解决webviewer兼容性问题。通过安装和配置Three.js适配版，实现高质量的3D渲染效果。

1.背景

想用小程序做模型渲染，但是webviewer出现不兼容问题，所以改为原生webgl渲染。

2.安装

项目文件夹内，如果没有package.json则新建，格式如下：

{
  "name": "abc",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "eamon",
  "license": "",
  "dependencies": {
  }
}

“详情”=〉“本地设置”=〉勾选“使用npm模块”

控制台/终端打开项目文件夹，通过npm安装：

npm install --save threejs-miniprogram

菜单“工具”=>“构建npm”完成安装。

3.导入小程序适配版本的 Three.js

官方案例：

import {createScopedThreejs} from 'threejs-miniprogram'

Page({
  onReady() {
    wx.createSelectorQuery()
      .select('#webgl')
      .node()
      .exec((res) => {
        const canvas = res[0].node
        // 创建一个与 canvas 绑定的 three.js
        const THREE = createScopedThreejs(canvas)
        // 传递并使用 THREE 变量
      })
  }
})

官方说明：

本项目当前使用的 Three.js 版本号为 0.108.0，如要更新 threejs 版本可发 PR 修改或 fork 后自行修改。
该适配版本的 THREE 不在全局环境中，如使用 Three.js 的其他配套类库，需要自行传入 THREE 到类库中。
如在使用过程中发现有适配问题，可通过 issue 反馈或发 PR 修复。

4.前端wxml页面

<canvas
  type="webgl"
  id="webgl"
  style="width: 100%; height: 100vh;"
></canvas>

5.配套类库

未完待续。。。

参考文章