ThreeJs OrbitControl import version from CDN

Question

I'm using threejs from CDN and i need OrbitControl too, but if I use the same lastest version 0.148.0 to import both Three and OrbitControl it don't work:

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js'
import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js'

To make it work I need to use FOR OrbitControl Only the lower 0.126.1 version

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js'
import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js'

WHY is so? Thank you very much, i'm a total beginnner

Answer 1

You need an import map when importing latest three.js releases. Rewrite your imports like so:

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

And in your HTML, put this in your header:

<script type="importmap">
    {
        "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.js",
                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
        }
    }
</script>

In this way, the imports will look exactly like in the official examples.

The import map will tell the browser how to resolve the bare module specifier three. More information in the official Installation guide.