THREEGlobals

当你使用了 @minisheep/three-platform-adapter/plugin 插件时，会自动在全局中定义这个变量，你可以将它理解为 web 环境的 window， 但仅包含了 three 中使用到的功能。

TIP

如果你疑惑为什么需要它，你可以参考 工作原理， 并且也可以在插件中的 prefixName 选项改变他的名字，THREEGlobals 只是一个默认值。

值得注意的是 THREEGlobals 上也可以访问 globalThis 上定义的所有属性。

在 typescript 中使用

你可以在 global.d.ts 添加下面的声明以获得正确的类型提示

import type { GlobalPatched } from '@minisheep/three-platform-adapter';
import type { SharedGlobals } from '@minisheep/mini-program-polyfill-core/wechat-polyfill';

declare global {
  const THREEGlobals: GlobalPatched<SharedGlobals>;
}

type GlobalPatched<T = any> = T & {
  OffscreenCanvas: typeof OffscreenCanvas;
  HTMLCanvasElement: typeof HTMLCanvasElement;
  HTMLImageElement: typeof HTMLImageElement;
  Image: typeof Image;

  innerWidth: number;
  innerHeight: number;
  devicePixelRatio: number;
  requestAnimationFrame: typeof requestAnimationFrame;
  cancelAnimationFrame: typeof cancelAnimationFrame;

  atob: typeof atob;
  performance: { now: () => number };
  window: GlobalPatched<T>;
  document: {
    createElement<T extends HTMLCanvasElement | HTMLImageElement>(tagName: 'image' | 'canvas'): T;
    createElementNS<T extends HTMLCanvasElement | HTMLImageElement>(tagName: 'image' | 'canvas'): T;
    body: any;
  } & EventTarget;
} & EventTarget;

SharedGlobals 见 @minisheep/mini-program-polyfill-core。