如何解决three.js 加载问题？答案

【问题标题】：How can I fix three.js loading issues?如何解决three.js 加载问题？
【发布时间】：2022-10-17 04:26:53
【问题描述】：

我在添加 three.js 库时遇到问题。谁能帮我？

【问题讨论】：

您指定的路径中有three.js 文件吗？
更多信息请阅读threejs.org/docs/#manual/en/introduction/Installation

【解决方案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，因此错误实际上是在您的示例文件中产生的。因此，如果没有导入映射，浏览器将无法解析说明符。

【讨论】：

需要注意的是（当前）在 Firefox 和 Safari 中不支持导入地图，以防这些平台与 OP 的用例相关。 caniuse.com/import-maps
上面的代码 sn-p 包含一个 shim，它应该可以在这些浏览器中运行。

【解决方案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';

【讨论】：