Three.js在尝试导入OrbitControls.js时中断

Question

首先，我想说的是，我对javascript和库工作非常陌生。我正试图让一些基本的three.js代码发挥作用，但它不起作用，我不知道为什么。我已经使用Threejs.org文档设置了一个基本场景，我正在尝试设置一些基本的轨道控制。在我尝试将轨道控件导入主脚本文件之前，一切都很好。然后我得到一个错误：

未捕获的类型错误：未能解析模块说明符"；三"；。相对引用必须以"或"开头/&"&"/&"；，或"/&"；。

我没有尝试太多来解决我的问题，因为我甚至不知道从哪里开始。我已经检查了我的拼写，并确保我的导入有正确的相对路径。

以下是有效的代码：

import * as THREE from '/node_modules/three/build/three.module.js';
// import { OrbitControls } from '/node_modules/three/examples/jsm/controls/OrbitControls.js';
// Construct basic scene elements
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
1,
1000
);
const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
// const controls = new OrbitControls(camera, renderer.domElement);
// Set parameters for scene elements
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

当我取消对轨道控制的第二个导入的注释时，它会中断并给出上面的错误。错误的原因是什么？我该如何修复？

提前谢谢。

Answer 1

欢迎使用堆栈溢出。你的问题似乎遗漏了一些信息，所以我将根据你提供的信息做出一些假设。如果我的任何假设不正确，请更新您的问题以提供更多详细信息。

我的主要假设是，您在HTML中使用<script>标记来引用主文件，并且您正在而不是使用任何JavaScript绑定工具，如Mugen87所述。如果是这种情况，那么您所拥有的一切都很好，但是，OrbitControls将不起作用除非您对其进行修改。

如果你深入研究OrbitControls.js文件，你会看到(截至r.130.1的当前版本(：

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

from引用假设您在npm上下文中使用模块，而不是在浏览器中。浏览器对npm包一无所知，也无法将three解析为其node_modules路径，从而导致您看到的错误。要实现这一点，您需要修改引用以指向正确的模块路径。

我个人不喜欢修改node_modules中的文件，所以我推荐以下内容：

1. 创建一个名为vendor_mods/three/examples/jsm/controls的新文件夹，并将OrbitControls.js复制到其中
2. 将复制文件中的from引用更改为指向/node_modules/three/build/three.module.js
3. 更改主文件中的引用以指向修改后的OrbitControls.js

现在，浏览器可以正确引用所有片段，每个人都应该很高兴。

Answer 2

从今天起轻松修复：

将
import { OrbitControls } from 'three/addons/controls/OrbitControls';
更改为
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

来源：

三年前是three-orbitcontrols最后一次出版。它现在被否决了，npm页面顶部有以下内容：

"作者的留言"：
三个js现在通过三个/examples/jsm/公开了真实的模块。。。例如，要导入Orbit，请从"three/examples/jsm/controls/OrbitControls"导入{OrbitControls}