Three.js模块加载失败求助：Python服务器部署项目异常

问题根源 #

你遇到的问题本质是Vite和Python静态服务器的模块处理逻辑差异：

• Vite是现代化模块打包工具，开发时会自动解析裸模块导入（比如import 'three'）、补全文件扩展名，还会处理依赖树；
• Python的http.server只是单纯的静态文件服务器，不具备模块解析能力，原生浏览器的ES模块也不支持裸模块导入，同时对无扩展名的文件请求会返回错误的MIME类型（比如把OrbitControls当成HTML文件）。

另外你当前的代码存在重复引入问题：HTML里直接引入了three.min.js和OrbitControls.js，同时myapp.js又导入一次OrbitControls，这会导致加载冲突。

最优解决方案：用Vite打包后部署 #

这是最稳妥的方式，步骤如下：

1. 打包项目
   在项目根目录运行：

npm run build

Vite会自动把所有依赖（Three.js、OrbitControls、你的业务代码）打包成浏览器可直接运行的静态文件，输出到dist目录。

2. 用Python服务器部署打包后的文件
   进入dist目录：

cd dist

然后启动服务器：

python -m http.server --bind 172.16.0.0 9999

此时其他设备就能正常访问你的Three.js项目了。

临时应急方案（不推荐用于生产） #

如果一定要直接运行源码（不打包），需要手动修复所有模块导入路径：

1. 修改myapp.js里的导入，补全.js扩展名：

import {OrbitControls} from "./node_modules/three/examples/jsm/controls/OrbitControls.js"

2. 打开node_modules/three/examples/jsm/controls/OrbitControls.js，把顶部的裸模块导入改成相对路径：

// 原代码：import * as THREE from 'three';
import * as THREE from '../../build/three.min.js';

3. 移除HTML里重复的模块引入，只保留必要的文件：

<body>
    <script type="module" src="GLTFLoader.js"></script>
    <script type="module" src="myapp.js"></script>
</body>

⚠️ 注意：这种方式需要修改所有依赖模块的导入路径，后续更新Three.js时还要重新修改，非常繁琐，只适合临时测试。

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