如何修复三个.js加载问题

Question

在此处输入图像描述

在此处输入图像描述

我在添加三个.js库时遇到问题。有人能帮我吗？

Answer 1

根据您的错误消息，您缺少在index.html中定义导入映射。这样做：

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "./three/build/three.module.js"
}
}
</script>

然后，您可以将THREE导入更改为：

import * as THREE from 'three';

由于OrbitControls和GLTFLoader使用了裸导入说明符three，因此该错误实际上是在示例文件中产生的。因此，如果没有导入映射，浏览器就无法解析说明符。

Answer 2

我遇到了同样的问题，这对我来说很有效。它使用CDN，但至少它能工作(也适用于firebox(：

<script async src="https://unpkg.com/es-module-shims@1.6.0/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.skypack.dev/three@0.144.0/build/three.module",
"three/": "https://cdn.skypack.dev/three@0.144.0/"
}
}
</script>
<script src="szene2.js" type="module">  </script>

在您的javascript:中

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';