Three.js 微信小程序示例教程-优快云博客

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

【免费下载链接】threejs-example-for-miniprogram 项目地址: 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 对象。