微信小程序使用ThreeJs需要使用官方库threejs-miniprogram ，API和原生ThreeJS基本一样，很好上手。喜欢数字孪生或者游戏的朋友，强烈推荐学习ThreeJs。该库入门简单，官方有很多优秀的demo可供参考，文档(包含中英文)也比较详细。

官方代码库

https://github.com/wechat-miniprogram/threejs-miniprogram

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

1、安装ThreeJS

npm install --save threejs-miniprogram

2、.wxml页面

添加canvash画布，设置宽度100%，高度设置为屏幕高度减去状态栏高度和导航栏高度。

<canvas
  type="webgl"
  id="webgl"
  style="width: 100%; height: {{screenHeight}}px;">
</canvas>

3、.js页面

导入threejs，并创建threejs变量传入模型中，方便使用该变量。

import {createScopedThreejs} from '../../utils/threejs/index.js'
const { renderModel } = require('../../utils/threejs/model')
 
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    screenHeight: app.globalData.screenHeight - app.globalData.statusBarHeight - 44 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    wx.createSelectorQuery()
    .select('#webgl')
    .node()
    .exec((res) => {
      const canvas = res[0].node
      // 创建一个与 canvas 绑定的 three.js
      const THREE = createScopedThreejs(canvas)
      // 传递并使用 THREE 变量
      renderModel(canvas, THREE)
    })
  },
 
})

4、运行效果