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

我们大家都知道要在浏览器中写 WebGL 会用到 threejs 这个库，这个库提供了很多好用的属性，实话说，如果没有计算机图形知识的人而言，刚开始接触这个库的时候，确实很多概念都很难理解，我刚开始就是这样。
我大概学 threejs 花了三个阶段：
第一个阶段：不求甚解，这个阶段完全就是看看实现的效果，看看里面的基本概念，但是啥都不了解
第二个阶段：了解基本概念，这个阶段就是去弄懂里面大概的几个概念了，知道是怎么回事了，但是还是不知道怎么用
第三个阶段：运用里面大部分的API，这个阶段，我基本上知道怎么用了，可以做一些简单的项目了
后面还有灵活运用、基于threejs开发工具这几个阶段还没到。
既然我已经知道怎么用 threejs，正好现在微信小程序开始支持 WebGL 了，那我就直接到小程序里面开发了。
刚开始开发的时候我就碰到了几个问题：

threejs 会操作 DOM,但是小程序里面没有 DOM
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 估计也只能自己动手