ThreeJs OrbitControl 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/three@0.148.0/build/three.module.js'
import {OrbitControls} from 'https://unpkg.com/three@0.148.0/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/three@0.148.0/build/three.module.js'
import {OrbitControls} from 'https://unpkg.com/three@0.126.1/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/three@0.148.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.148.0/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.