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

项目介绍

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

项目快速启动

安装

1. 克隆项目：

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

2. 安装依赖：

   cd threejs-example-for-miniprogram
   npm install
   

3. 在微信小程序开发者工具中导入项目：

   • 打开微信小程序开发者工具，选择"导入项目"，然后选择 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 选中立方体 - 展示射线检测交互功能

注意事项

1. 域名配置：由于示例中有较多的模型使用官网链接，加载比较慢。小程序只能与指定的域名进行网络通信，使用前请配置信任域名。

2. 内存泄漏：为防止内存泄漏，请在页面 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 库
• 多个示例页面 - 展示不同功能的实现方式
• 工具函数 - 提供资源加载、运行时支持等功能

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