Three.js 微信小程序示例教程

2026-02-06 04:15:23作者：蔡丛锟

项目地址：https://gitcode.com/gh_mirrors/th/threejs-example-for-miniprogram

项目介绍

threejs-example-for-miniprogram 是一个开源项目，旨在将 Three.js 移植到微信小程序中。Three.js 是一个用于在网页上创建和显示 3D 图形的 JavaScript 库。通过这个项目，开发者可以在微信小程序中利用 Three.js 的功能来创建丰富的 3D 内容。

项目快速启动

安装

克隆项目：

git clone https://gitcode.com/gh_mirrors/th/threejs-example-for-miniprogram.git

安装依赖：

cd threejs-example-for-miniprogram
npm install

在微信小程序开发者工具中导入项目：
- 打开微信小程序开发者工具，选择"导入项目"，然后选择 threejs-example-for-miniprogram 目录。

示例代码

以下是一个简单的示例代码，展示如何在微信小程序中使用 Three.js：

import * as THREE from '../../libs/three.weapp.js'

Page({
  onReady() {
    wx.createSelectorQuery().select('#webgl').node().exec((res) => {
      const canvas = res[0].node
      const THREE = createScopedThreejs(canvas)

      // 创建场景
      const scene = new THREE.Scene()

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000)
      camera.position.z = 5

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer({ canvas })
      renderer.setSize(canvas.width, canvas.height)

      // 创建一个立方体
      const geometry = new THREE.BoxGeometry()
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
      const cube = new THREE.Mesh(geometry, material)
      scene.add(cube)

      // 渲染循环
      const animate = function () {
        requestAnimationFrame(animate)
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        renderer.render(scene, camera)
      }

      animate()
    })
  }
})

项目结构

项目包含多个示例页面，展示了不同的 Three.js 功能：

基本示例 - 展示基础的 3D 渲染功能
动画示例 - 展示 3D 动画效果
OrbitControl 立方体 - 展示轨道控制器的使用
gLTF 文件加载 - 展示 3D 模型加载功能
glb 文件 - 展示二进制格式模型加载
obj 文件 - 展示 OBJ 格式模型加载
raycaster 选中立方体 - 展示射线检测交互功能

注意事项

域名配置：由于示例中有较多的模型使用官网链接，加载比较慢。小程序只能与指定的域名进行网络通信，使用前请配置信任域名。
内存泄漏：为防止内存泄漏，请在页面 unload 时，用 THREE.global.unregisterCanvas 或 THREE.global.clearCanvas 清除 THREE.global 中的 canvas 引用。同时利用 canvas.cancelAnimationFrame 清除动画，并且释放 Geometries、Materials 等 Three.js 对象。

兼容性

项目已在多种设备和微信版本上测试通过：

xiaomi MIX2 Android 8.0.0 Wechat Version 7.0.5
vivo X21A Android 9 Wechat Version 7.0.5
iphone 8Plus ios13.1.2 Wechat Version 7.0.8

应用案例和最佳实践

应用案例

3D 模型展示：在微信小程序中展示 3D 模型，如产品展示、艺术品展示等。
虚拟现实体验：利用 Three.js 在小程序中创建虚拟现实体验，如虚拟展厅、虚拟试衣间等。
游戏开发：开发基于 3D 的小程序游戏，提供更丰富的用户体验。

最佳实践

性能优化：在小程序中使用 Three.js 时，应注意性能优化，如减少不必要的渲染、使用纹理压缩等。
兼容性测试：确保在不同设备和不同版本的微信小程序中都能正常运行。
代码结构：保持代码结构清晰，便于维护和扩展。

技术架构

项目基于微信小程序环境对 Three.js 进行了适配，主要包含：

libs/three.weapp.js - 适配微信小程序的 Three.js 库
多个示例页面 - 展示不同功能的实现方式
工具函数 - 提供资源加载、运行时支持等功能

项目结构清晰，每个功能模块都有对应的实现示例，便于开发者学习和参考。

threejs-example-for-miniprogram