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里面的文件，所以推荐如下：

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

现在，浏览器可以正确引用所有片段了，大家应该很高兴了。

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

Three.js breaks when trying to import OrbitControls.js

javascript

three.js