导入OrbitControl.js会产生未明类型的错误

Question

我正在编写一些Javascript，它将glb 3d模型加载到网页中。一切都正常。

但是，一旦导入OrbitControl.js (无论是从本地文件夹还是从联机)，浏览器就会给出以下错误：

Uncaught :未能解析模块说明符“三”。相对引用必须以"/“、"./”或“./”.*开头

下面是完整的代码：

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.js中的代码。因为它显示了

​

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

​

这意味着这是从“三”导入的，要解决这个问题，您可能需要将“三”更改为“trie.module.js”的地址。因为OrbitControls.js的原始文件是用于npm安装的。

Answer 2

OrbitControls应该从examples目录中导入，就像导入了GLTFLoader一样。

所以你需要这样的东西：

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

或者，因为您在路径中使用了three.js-master：

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