导入 OrbitControl.js 会出现未捕获的类型错误

Question

I'm writing some Javascript that loads a glb 3d model into a webpage. Everything is working.

But as soon as I import the OrbitControl.js (either from my local folder or online) the browser gives me this error:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".*

Here's the full code:

import * as THREE from './three.js-master/three.js-master/build/three.module.js'
import {GLTFLoader} from './three.js-master/three.js-master/examples/jsm/loaders/GLTFLoader.js'
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js"


const canvas = document.querySelector('.webgl')
const scene =  new THREE.Scene()

const loader = new GLTFLoader()
loader.load('assets/Prova.glb', function(glb){
    const root = glb.scene;
    root.scale.set(1,1,1)
    scene.add(root);
},function(xhr){
   console.log((xhr.loaded/xhr.total * 100) + "% loaded")
}, function(error){
    console.log('An error occured loading gltf')
})

const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(2,2,5)
scene.add(light)


const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

const camera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 100)
camera.position.set(0,1,2)
scene.add(camera)




const renderer = new THREE.WebGL1Renderer

({
    canvas: canvas
})

renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.shadowMap.enabled = true
renderer.outputEncoding = THREE.sRGBEncoding

controls = new OrbitControls(camera, canvas)

function animate(){
    requestAnimationFrame(animate)
    controls.update();
    renderer.render(scene, camera)
}

animate()

Answer 1

OrbitControls should be imported from the examples directory, just like you've imported GLTFLoader .

So you'll need something like:

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

Or, since you're using three.js-master in the path:

import { OrbitControls } from './three.js-master/three.js-master/examples/jsm/controls/OrbitControls";

Answer 2

I am not sure if u have notice the code in OrbitControls.js . Cuz it shows

 import { EventDispatcher, MOUSE, Quaternion, Spherical, TOUCH, Vector2, Vector3 } from 'three';

So which means this was import from 'three', and to solve this problem you may need change the 'three' into the address of your 'three.module.js'. Because the original file of OrbitControls.js was for npm install.