[SOLVED] Is there a way to only have one instance of THREE when using Threebox

Is there a way to only have one instance of THREE when using Threebox

I am using Threebox with Mapbox, I define threebox like so:

(window as any).tb = new Threebox(this, gl, { defaultLights: true });

but I am also importing THREE like so:

import * as THREE from 'three';

So that I can use it for things like raycasting.

I am getting this warning in my app:

"WARNING: Multiple instances of Three.js being imported."

I am wondering if there is a way to get threebox to use the same instance of THREE, or be able to use the threebox instance of THREE somehow, without importing THREE again.

Solution

The main file of Threebox exports THREE. (source)

It looks like you are using es imports (and letting a bundler handle the CommonJS exports), so wherever you are importing Threebox, you should be able to do the same with THREE.

import { THREE, Threebox } from 'threebox'