导入三个和GLTFLoader

Question

我需要帮助，当我只导入三个时，我没有问题，但是当我添加 GLTFloader 导入时，我的控制台中出现此错误消息：

未捕获的类型错误：无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头。

我的代码：

import * as THREE from "./node_modules/three/build/three.module.js"

import { GLTF, GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';

我尝试了几个作家，但仍然遇到同样的问题

Answer 1

首先，您显然需要使用网络捆绑器。以前，我使用 Webpack，它运行得很好。不过，Vite 是我现在的首选！因此，您选择哪个取决于您过去的经验（如果您使用过其中之一）以及您喜欢它的方式。以下是两个可以帮助您的链接。

---

使用Webpack： https://abi-web-app-documentation.readthedocs.io/en/latest/ Three/tutorial_2/ Threejs_with_webpack.html

https://sbcode.net/thirdjs/webpack-dev-server/

---

使用Vite： https://medium.com/@alejocain/13-creating-a-canvas-with-thirdjs-and-vite-6792eab50967

https://faun.pub/how-to-make-your-first- Three-js-project-with-vite-javascript-d6aa2e99e92c

---

文档： https://thirdjs.org/docs/#manual/en/introduction/Installation