微信小程序中寫threejs系列之 threejs-miniprogram

我們大家都知道要在瀏覽器中寫 WebGL 會用到 threejs 這個庫，這個庫提供了很多好用的屬性，實話說，如果沒有計算機圖形知識的人而言，剛開始接觸這個庫的時候，確實很多概念都很難理解，我剛開始就是這樣。
我大概學 threejs 花了三個階段：
第一個階段：不求甚解，這個階段完全就是看看實現的效果，看看里面的基本概念，但是啥都不了解
第二個階段：了解基本概念，這個階段就是去弄懂里面大概的幾個概念了，知道是怎么回事了，但是還是不知道怎么用
第三個階段：運用里面大部分的API，這個階段，我基本上知道怎么用了，可以做一些簡單的項目了
后面還有靈活運用、基於threejs開發工具這幾個階段還沒到。
既然我已經知道怎么用 threejs，正好現在微信小程序開始支持 WebGL 了，那我就直接到小程序里面開發了。
剛開始開發的時候我就碰到了幾個問題：

1. threejs 會操作 DOM,但是小程序里面沒有 DOM
2. threejs 會綁定 window 對象，但是小程序里面沒有 window

網上對這一塊有一些解決方案，有一個大佬自己開發了一個適配小程序的 threejs.miniprogram，基本上大部分的功能是都可以用的
還有的人針對 小游戲 里面的 weapp-adapter 做了二次開發，主要是將瀏覽器中的 DOM 和 window 對象進行模擬
這兩個方案畢竟都是民間的，得不到穩定的維護，后來我發現微信官方出了一個 threejs-miniprogram，官方出品的，把 threejs 里面的大部分功能適配過來了，但是也有很多不足的地方，比如 Controls 這一塊沒有適配過來，可能小程序上需要實現的 3D 效果不需要很多的原因吧

使用方式：

npm install --save threejs-miniprogram

import {createScopedThreejs} from 'threejs-miniprogram'
Page({
  onReady() {
    wx.createSelectorQuery()
      .select('#webgl')
      .node()
      .exec((res) => {
        const canvas = res[0].node
        // 創建一個與 canvas 綁定的 three.js
        const THREE = createScopedThreejs(canvas)
        // 傳遞並使用 THREE 變量
      })
  }
})

也要注意一點：threejs-miniprogram 適配的 Three.js 版本號為 0.108.0，如果需要修改只能自己動手了，還有就是里面的 Controls 估計也只能自己動手