如何在小程序下优雅的使用THREE.JS 如何在小程序下优雅的使用T

成果 three-platfromize目前已实现微信小程序和淘宝小程序的适配，均可加载GLB文件
微信小程序点击查看微信小程序DEMO
起因估计尝试过在小程序使用 THREE 的朋友估计都体会到微信官方推出的适配版的难用，直接让开发体验回到解放前。

无类型提示，对于three新手不友好，对于习惯了代码即文档的也不友好。
无法顺畅使用 three.js 生态的 npm 包，需要手动 scope 注入 three 的依赖。
无 tree shaking，在只有 2mb 容量的包大小限制下，three 是个庞然大物。
没有平台相关资源释放接口（即VSCode里面的Disposable模式）。
每个小程序平台需要单独适配一个，定制 three 的维护成本高。

所以有了 THREE 平台化的想法。既然微信官方的适配版这么多不能，所以平台化的目标就是把“不”去掉。
目标

支持TS类型提示，能方便查阅API文档（d.ts）
可以通过构建修改方便使用 three 生态 npm 包，无需手动 scope，比如 GLTFLoader
支持 tree shaking 能减少多点就少点，加个 tfjs 就更加头大。
有资源释放 dispose 接口。
支持方便动态注入多个小程序平台的平台接口实现适配器，多 backends 。

参考既然需要多平台支持，所以需要向平台化很好的项目学习比如 tfjs ，实现了多个backend 有 CPU，WebGL，WASM。其运行的平台的适配有PlatformBrowser，PlatformNode，PlatformWechat（tfjs的微信小程序插件里有）

文章图片
image 然后在一个Environment全局单例实现平台的切换逻辑。

文章图片
image 实现所以需要一个全局的单例实现平台依赖的转发切换（模仿 THREE 的源码风格）
实现平台的全局单例

// 为了避免重新声明的报错 let $URL = null; let $atob = null; let $Blob = null; let $window = null; let $document = null; let $XMLHttpRequest = null; let $OffscreenCanvas = null; let $HTMLCanvasElement = null; let $createImageBitmap = null; let $requestAnimationFrame = null; class Platform {set(platform) {this.platform && this.platform.dispose(); this.platform = platform; const globals = platform.getGlobals(); $atob = globals.atob; $Blob = globals.Blob; $window = globals.window; $document = globals.document; $XMLHttpRequest = globals.XMLHttpRequest; $OffscreenCanvas = globals.OffscreenCanvas; $HTMLCanvasElement = globals.HTMLCanvasElement; $createImageBitmap = globals.createImageBitmap; $requestAnimationFrame = globals.requestAnimationFrame; $URL = globals.window.URL; }dispose() {this.platform && this.platform.dispose(); $URL = null; $Blob = null; $atob = null; $window = null; $document = null; $XMLHttpRequest = null; $OffscreenCanvas = null; $HTMLCanvasElement = null; $createImageBitmap = null; $requestAnimationFrame = null; }}const PLATFORM = new Platform(); export { PLATFORM, $window, $document, $XMLHttpRequest, $atob, $OffscreenCanvas, $HTMLCanvasElement, $requestAnimationFrame, $Blob, $URL, $createImageBitmap };

由于 tfjs 是提前就做了平台化的计划，所以从源码上就平台化了，但是 THREE 并没有，所以需要从构建入手。实现平台依赖转发，比如源码的window对象需要指向平台的window。
实现平台依赖转发
【如何在小程序下优雅的使用THREE.JS】经过多查阅，发现@rollup/plugin-inject能十分轻松实现依赖转发，这里是把平台有关的变量转发到Platform的导出

import path from 'path'; import inject from '@rollup/plugin-inject'; export const platformVariables = [ 'URL', 'atob', 'Blob', 'window', 'document', 'XMLHttpRequest', 'OffscreenCanvas', 'HTMLCanvasElement', 'createImageBitmap', 'requestAnimationFrame', ]; export function platformize( list = platformVariables, platformPath = path .resolve(__dirname, '../src/Platform') .replaceAll('\\', '\\\\'), ) { return inject({ exclude: /src\/platforms/, // 平台自定义代码无需转发'self.URL': [platformPath, '$URL'], ...list.reduce((acc, curr) => { acc[curr] = [platformPath, `$${curr}`]; return acc; }, {}), }); }

编写平台比如WechatPlatform
里面可以参考微信官方适配器，同理适配淘宝小程序时候，只需编写TaobaoPlatform即可

import URL from '../libs/URL' import Blob from '../libs/Blob' import atob from '../libs/atob' import EventTarget from '../libs/EventTarget' import XMLHttpRequest from './XMLHttpRequest' import copyProperties from '../libs/copyProperties'function OffscreenCanvas() { return wx.createOffscreenCanvas() }export class WechatPlatform {constructor( canvas ) {const systemInfo = wx.getSystemInfoSync()this.canvas = canvas; this.document = {createElementNS( _, type ) {if (type === 'canvas') return canvas; if (type === 'img') return canvas.createImage(); }}; this.window = { innerWidth: systemInfo.windowWidth, innerHeight: systemInfo.windowHeight, devicePixelRatio: systemInfo.pixelRatio, AudioContext: function() {}, URL: new URL(), requestAnimationFrame: this.canvas.requestAnimationFrame,}; [this.canvas, this.document, this.window].forEach(i => {copyProperties(i.constructor.prototype, EventTarget.prototype)}); this.patchCanvas(); }patchCanvas() {Object.defineProperty(this.canvas, 'style', {get() {return { width: this.width + 'px', height: this.height + 'px' }}})Object.defineProperty(this.canvas, 'clientHeight', {get() { return this.height }})Object.defineProperty(this.canvas, 'clientWidth', {get() { return this.width }})}getGlobals() {return {atob: atob, Blob: Blob, window: this.window, document: this.document, HTMLCanvasElement: undefined, XMLHttpRequest: XMLHttpRequest, requestAnimationFrame: this.canvas.requestAnimationFrame, OffscreenCanvas: OffscreenCanvas, createImageBitmap: undefined,}}dispose() {this.document = null; this.window = null; this.canvas = null; }}

实现支持类型提示
Platform.d.ts

export class Platform { set(platform: any): void; dispose(): void; }export const PLATFORM: Platform; export let $atob: any; export let $window: any; export let $document: any; export let $XMLHttpRequest: any; export let $OffscreenCanvas: any; export let $HTMLCanvasElement: any; export let $createImageBitmap: any; export let $requestAnimationFrame: any;

ThreePlatformize.d.ts

export * from 'three' export * from './Platform'

没错，就是如此的简单
支持tree shaking
package.json 设置 sideEffects 为 false

{ ... "sideEffects": false, ... }

支持THREE的生态
目前是指 three 包下面的examples/jsm/\*\*/\*.js，依然是通过构建支持

import path from 'path'; import copy from 'rollup-plugin-copy'; import * as fastGlob from 'fast-glob'; import { platformVariables, platformize } from './platfromize'; const ThreeOrigin = path.resolve(__dirname, '../three/build/three.module.js'); export default fastGlob.sync('three/examples/jsm/**/*.js').map(input => { return { input, output: { format: 'esm', file: input.replace('three/', ''), }, external: () => true, plugins: [ platformize(platformVariables, ThreeOrigin), copy({ targets: [ { src: input.replace('.js', '.d.ts'), dest: path.dirname(input.replace('three/', '')), }, ], }), ], }; });

依赖 three 包的npm 包如果是平台无关的话，只需要通过 alias 指向平台化后的 three 即可。若平台相关的，则仍需编写插件支持，可类比上面rollup插件platformize。
成果所以three-platfromize的项目诞生了。目前已实现微信小程序和淘宝小程序平台的适配。
微信小程序点击查看微信小程序DEMO
淘宝小程序点击查看淘宝小程序DEMO
后续会适配更多小程序平台，让3D开发变得更加优雅。
demo的动图实现是通过three-sprite-player实现，能避免微信小程序纹理大小限制，也欢迎大家品尝。