微信小程序ThreeJs加载3D模型

微信小程序使用ThreeJs需要使用官方库threejs-miniprogram ，API和原生ThreeJS基本一样，很好上手。喜欢数字孪生或者游戏的朋友，强烈推荐学习ThreeJs。该库入门简单，官方有很多优秀的demo可供参考，文档(包含中英文)也比较详细。有计划用ThreeJS做一个动物世界，模拟原始森林里各种各样的有趣的可爱的动物，包括它们声音和故事。有兴趣的或想加入这个计划的朋友可以在下面留言。

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、运行效果

3d模型.png