WARNING: Multiple instances of Three.js being imported. (?)

Why is this showing in the console when I import three.module.js and OrbitControls.js
Literally this 2 lines of code.

<script type="module">
    import * as THREE from 'https://unpkg.com/three/build/three.module.js';
    import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";	
</script>

See the “Examples” section on this page:

https://threejs.org/docs/#manual/en/introduction/Installation

When importing different parts of the three.js library from a CDN, it’s important to import consistently from the same CDN. The version of OrbitControls hosted on one domain depends on THREE from that same domain, so in this case the THREE library is being imported both from unpkg.com and from threejs.org.

Instead, try:

import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';
2 Likes

Still warning :((

Those are not the same URLs I suggested — by omitting a version (e.g. @0.126.1) the CDN will redirect both URLs and ultimately include two copies of the library again. I’d strongly recommend pinning to a specific version of three.js rather than having it update underneath you, but if you’d prefer not to do that then the threejs.org URL is the one to use.