THREE.js 无法导入模块

Question

我正在尝试导入 threejs 和 GLTFLoader 模块，这两个模块（用于测试）都在同一个 root/js/ 文件夹中..

import * as THREE from './js/build/three.module.js'; // Works fine 
import { GLTFLoader } from './js/build/GLTFLoader.js'; // Throws a disallowed MIME TYPE error

我遇到了 mimetype 问题，但是在三个主“结构”中没有抛出错误，那么为什么这不起作用？

编辑：

所以当取消注释导入 GLTF 行时，抛出的错误如下：

Loading module from “http://localhost/dev/project/build/three.module.js” was blocked because of a disallowed MIME type (“text/html”).

它似乎指的是three.module.js 路径，但是当该行被注释掉时，它都可以正常加载而没有错误。所有文件/文件夹的路径也是正确的。

Answer 1

我意识到我的问题有些不清楚，但基本上我想要做的是使用模块化 three.js 功能，同时将整个项目保留在单个根文件夹中 - 即不必遍历“构建”文件。

我觉得这可能是经常需要的东西（在没有 webpack 等的情况下），因为网站通常包含在单个根文件夹中。

经过一些有用的输入后，我能够通过以下方式解决此问题..

文件夹结构：

root/
 |
 | -- index.html
 |
 |
 | -- /build/
 |      |
 |      | -- three.module.js 
 |
 |
 | -- /js/
        |
        | -- app.js*
        |
        | -- /jsm/
               |
               | -- /libs/ ...        
               | -- /loaders/ ...

导入（在 app.js 中）

import * as THREE from '../build/three.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { TWEEN } from './jsm/libs/tween.module.min.js';
import Stats from './jsm/libs/stats.module.js';

希望这对任何寻求相同解决方案的人有用，并一如既往地感谢社区提供的宝贵帮助！

Answer 2

这一行

import { GLTFLoader } from './js/build/GLTFLoader.js';

应该是

import { GLTFLoader } from './js/examples/jsm/loaders/GLTFLoader.js';

你应该构建你的three.js文件以匹配官方的three.js文件夹结构。

见this answer

我想非常清楚，@ScieCode 建议编辑 GLTFLoader.js 不是一个好建议。如果您遵循该建议，您将不得不开始编辑您在 example/jsm 中使用的所有文件，例如 OrbitControls.js 文件、TrackballControls.js 文件、EffectComposer.js 文件（以及它包含的所有文件，例如 MaskPass。 js、CopyPass.js、Pass.js）。而且，如果您获得了新版本，则必须再次重新编辑所有这些文件。

只需使用linked answer 中指出的官方文件夹结构，即可正常工作，无需编辑。