Threejs 导入 OrbitControl.js

Question

So I'm just using a normal html with no other libraries..like reactjs,vitejs,vuejs etc... I want it just to import as normal html and just put in the script tag.

So the thing is I don't know why I keep receiving the wrong import giving me something like this

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
This problem occured only in my OrbitControls.js and I don't understand what it means.

And this how it looks in my script terminal and file locations.

I tried to copy the unpkg link of the orbit control but also it doesn't work..I tried also to pass the raw file but still doesn't work.. Can anyone help me through this?

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js" integrity="sha512-WoO4Ih0CDOSLYafy22wZD/mcJ7k0ESLqtQsFa6zFKnEUrbtuGU+GkLtVhgt93xa2qewG5gKEC6CWlN8OaCTSVg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="OrbitControls.js" type="module"></script>

  <script type="module">
        import * as THREE from 'https://unpkg.com/three@0.141.0/build/three.module.js';
        import * as dat from './dat.gui.module.js'

        import { OrbitControls }  from 'OrbitControls.js'
        // console.log(dat)
        // const orbit = new OrbitControls()
        console.log(OrbitControls)
  </src> 

I also tried to get the link of the OrbitControls by doing something like this

import { OrbitControls } from 'https://unpkg.com/browse/three@0.141.0/examples/jsm/controls/OrbitControls.js'
console.log(OrbitControls)

Answer 1

When not working with a bundler, you have to define an import map when using the ES6 modules of three.js . Put the following code into your HTML:

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.141.0/build/three.module.js"
        }
    }
</script>

In your JS code, do this:

import * as THREE from 'three';
import { OrbitControls } from 'https://unpkg.com/three@0.141.0/examples/jsm/controls/OrbitControls.js';

You also have to remove the line <script src="OrbitControls.js" type="module"></script> .