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

Questions
1

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>
2

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
3

Still warning :((

image
image900Ă—85 8.16 KB
image
image1037Ă—67 5.05 KB

4

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.

5

Didn’t really work for me with the code here:

image
image1292Ă—485 70 KB

Edit:

Turns out that it’s my “Immersive VR Emulator” Chrome extension was behind the error. The code works in incognico mode

1 Like