尝试导入 OrbitControls.js 时 Three.js 中断 [英] Three.js breaks when trying to import OrbitControls.js
问题描述
首先,我想说我对 javascript 和使用库非常陌生.我试图让一些基本的three.js 代码工作,但它不起作用,我不知道为什么.我已经使用 Threejs.org 文档设置了一个基本场景,我正在尝试设置一些基本的轨道控制.一切正常,直到我尝试将轨道控件导入到我的主脚本文件中.然后我收到一个错误:
First I want to say that I'm very new to javascript and working with libraries. I'm trying to get some basic three.js code to work but it's not working and I'm not sure why. I have set up a basic scene using the Threejs.org documentation and I'm trying to get some basic orbit controls set up. Everything works fine until I try to import the orbit controls into my main script file. I then get an error:
未捕获的类型错误:无法解析模块说明符三".相对引用必须以/"、./"或../"开头.
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
我没有尝试太多来解决我的问题,因为我什至不知道从哪里开始.我检查了我的拼写并确保我有正确的导入相对路径.
I haven't tried much to solve my problem because I'm not even sure where to start. I've checked my spelling and made sure I had the correct relative path for my imports.
这是有效的代码:
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);
当我取消注释轨道控件的第二个导入时,它会中断并给我上面的错误.导致错误的原因是什么,我该如何解决?
When I uncomment the second import for the orbit controls it breaks and gives me the error above. What is causing the error and how do I fix it?
提前致谢.
推荐答案
欢迎使用 Stack Overflow.您的问题似乎缺少一些信息,因此我将根据您提供的信息做出一些假设.如果我的任何假设不正确,请更新您的问题以提供更多详细信息.
Welcome to Stack Overflow. You question seems to be missing some information, so I'm going to make some assumptions based on what you have provided. If any of my assumptions are incorrect, please update your question to provide further details.
我的主要假设是您在 HTML
中使用 标签来引用您的主文件,而您不是em> 使用任何 JavaScript 捆绑工具,如提到的 Mugen87.如果是这种情况,那么您所拥有的就可以了,但是,
OrbitControls
除非您修改,否则将不起作用
My primary assumption is that you are using a <script>
tag in your HTML
to reference your main file, and that you are not using any JavaScript bundling tools like Mugen87 mentioned. If this is the case, then what you have is fine, BUT, OrbitControls
will not work unless you modify it.
如果您深入研究 OrbitControls.js
文件,您会看到(当前为 r.130.1):
If you dig into the OrbitControls.js
file, you'll see (current as of r.130.1):
import {
EventDispatcher,
MOUSE,
Quaternion,
Spherical,
TOUCH,
Vector2,
Vector3
} from 'three';
from
参考假设您在 npm
上下文中使用模块,而不是浏览器.浏览器对 npm
包一无所知,也无法将 three
解析到其 node_modules
路径,从而导致您看到的错误.要使此工作正常进行,您需要修改引用以指向正确的模块路径.
The from
reference makes the assumption that you are using the module from within an npm
context, not a browser. Browsers don't know anything about npm
packages, and they can't resolve three
to its node_modules
path, resulting in the error you saw. To make this work, you will need to modify the reference to point to the correct module path.
我个人不喜欢修改node_modules
里面的文件,所以我推荐如下:
I personally don't like modifying the files inside node_modules
, so I recommend the following:
- 创建一个名为
vendor_mods/three/examples/jsm/controls
的新文件夹,并将OrbitControls.js
复制到其中. - 将复制文件中的
from
引用更改为指向/node_modules/three/build/three.module.js
- 更改主文件中的引用以指向修改后的
OrbitControls.js
.
- Make a new folder called
vendor_mods/three/examples/jsm/controls
and copyOrbitControls.js
into it. - Change the
from
reference in the copied file to point to/node_modules/three/build/three.module.js
- Change the reference in your main file to point to your modified
OrbitControls.js
.
现在,浏览器可以正确引用所有片段了,大家应该很高兴.
Now, the browser can reference all the pieces correctly, and everyone should be happy.
这篇关于尝试导入 OrbitControls.js 时 Three.js 中断的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!