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

欢迎来到 Stack Overflow。您的问题似乎缺少一些信息，因此我将根据您提供的内容做出一些假设。如果我的任何假设不正确，请更新您的问题以提供更多详细信息。

我的主要假设是您在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。

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