如何将Three.js项目部署至GitHub Pages？解决库上传难题

能不能将Three.js库添加至仓库？ #

可以，但不建议上传完整的Three.js源码包或node_modules目录——这会因为文件数量/体积过大触发GitHub的存储限制，反而导致部署异常。如果一定要把依赖文件放到仓库里，只需要上传项目实际用到的压缩生产版文件（比如three.min.js），而非整个源码库。不过更高效的方案是用CDN引入，完全不用把库文件放到仓库里。

用CDN替代上传的实施步骤 #

1. 替换本地库引用 #

找到HTML里引入本地Three.js的代码（类似下面这种）：

<script src="./libs/three.min.js"></script>
<script src="./libs/OrbitControls.js"></script>

直接删除这些本地路径的引用，换成CDN链接。

2. 引入对应版本的CDN资源 #

选择和你本地开发时一致的Three.js版本（避免API兼容问题），用CDN链接替换。比如用jsDelivr的CDN：

<!-- 核心Three.js库，替换成你用的版本号 -->
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<!-- 如果用到扩展组件，比如控制器、加载器，也要引入对应CDN文件 -->
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>

注意：一定要指定版本号（比如@0.160.0），不要用无版本的链接，防止后续版本更新导致代码报错。

3. 本地验证 #

修改后在本地打开HTML文件，确认Three.js场景能正常渲染，确保CDN资源加载正常，没有控制台报错。

4. 提交部署 #

把修改后的代码（只保留你的业务代码：HTML、CSS、自定义JS）提交到GitHub仓库，重新部署到GitHub Pages。此时页面会从CDN加载Three.js资源，不会再出现文件数量过多的问题，场景就能正常显示了。

额外：构建工具场景的优化（可选） #

如果你的项目用了Vite、Webpack这类构建工具，可以配置外部依赖，让打包时不把Three.js打包进产物，进一步减小包体积：
以Vite为例，在vite.config.js里添加配置：

export default {
  build: {
    rollupOptions: {
      // 标记three为外部依赖
      external: ['three'],
      output: {
        // 全局变量映射，对应CDN引入的THREE
        globals: {
          three: 'THREE'
        }
      }
    }
  }
}

配置后依然在HTML里引入CDN链接，打包后的代码会直接使用全局的THREE变量，无需打包库文件。

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