尝试导入 OrbitControls.js 时 Three.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

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

我的主要假设是，您正在使用<script>标签HTML来引用您的主文件，并且您没有使用任何 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.

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