如何在使用Threebox时仅保留一个THREE实例？

嗨，这个问题我之前也碰到过！其实Threebox本身就提供了解决方案，有两种思路可以帮你消除这个多实例警告，只保留一个THREE实例：

方案一：让Threebox复用你导入的THREE实例 #

你可以在初始化Threebox的时候，直接把自己导入的THREE实例传给它，这样Threebox就不会再加载它自带的Three.js版本了。修改你的初始化代码如下：

import * as THREE from 'three';

// 初始化Threebox时，在配置项中指定使用我们自己的THREE实例
(window as any).tb = new Threebox(this, gl, { 
  defaultLights: true,
  THREE: THREE // 这行是关键，告诉Threebox用我们已有的实例
});

这样配置后，Threebox会直接复用你导入的THREE对象，不会再引入新的实例，那个烦人的警告就会消失，你也能继续用自己导入的THREE来做射线检测等操作。

方案二：直接使用Threebox内置的THREE实例 #

如果你不想自己单独导入Three.js，也可以直接从初始化后的Threebox实例中获取它自带的THREE对象，这样就完全不需要自己再import了：

// 先正常初始化Threebox，不用提前import THREE
(window as any).tb = new Threebox(this, gl, { defaultLights: true });

// 从Threebox实例中取出内置的THREE对象
const THREE = (window as any).tb.THREE;

// 接下来就可以用这个THREE来做你需要的操作，比如射线检测
const raycaster = new THREE.Raycaster();

这种方式下，整个项目里只会存在Threebox自带的那一个THREE实例，自然不会有多实例的冲突。

额外小提示 #

如果你用的是Webpack、Vite这类打包工具，最好确保项目里只存在一个Three.js版本——可以检查package.json，让Threebox依赖的Three.js版本和你项目中使用的版本保持兼容，这样打包工具也会自动帮你合并重复的依赖，进一步避免这类问题。

备注：内容来源于stack exchange，提问作者offlineanton