Three.js项目加载.obj模型报错：无法解析模块说明符‘three’

这个错误是因为浏览器原生ES模块系统不支持直接使用包名（如three）作为模块引用，必须使用相对路径、绝对路径或通过配置映射来解析模块。以下是几种可行的解决方法：

方法1：使用本地Three.js文件的相对路径 #

• 从Three.js官网下载包含ES模块的版本，将three.module.js及所需的附加模块（如OBJLoader.js）放到项目目录的子文件夹中（比如./libs/）。
• 在mainpage.js中修改引用路径：

  import * as THREE from './libs/three.module.js';
  import { OBJLoader } from './libs/OBJLoader.js';
  

方法2：通过CDN配置importmap #

• 在mainpage.html的<head>中添加importmap配置，直接映射three包名到CDN的ES模块地址：

  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/"
      }
    }
  </script>
  

• 之后在mainpage.js中就可以正常使用包名引用：

  import * as THREE from 'three';
  import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
  

方法3：使用构建工具（Vite/Webpack等） #

• 如果项目使用构建工具，先通过npm安装Three.js：

  npm install three
  

• 代码中直接使用包名引用即可，构建工具会自动解析并转换为浏览器可识别的路径：

  import * as THREE from 'three';
  import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
  

注意事项 #

确保mainpage.html中的script标签添加了type="module"属性，否则浏览器不会按ES模块解析脚本：

<script type="module" src="mainpage.js"></script>

内容的提问来源于stack exchange，提问作者ben_stays_anonymous