为何Three.js部分版本CDN链接可用，部分版本出现NS_ERROR_CORRUPTED

为何Three.js部分版本CDN链接可用，部分版本出现NS_ERROR_CORRUPTED_CONTENT错误？

阿华AIGC实验室

2026-4-14

为何Three.js部分版本CDN链接可用，部分版本出现NS_ERROR_CORRUPTED_CONTENT错误？

这个问题问得好！咱们来拆解下背后的原因，以及怎么解决它。你遇到的情况其实是Three.js版本升级后，资源结构和引入逻辑发生了关键变化，并不是你操作有误，而是官方调整了CDN资源的供给方式。

问题根源

在Three.js的旧版本（比如你用的r128）里，官方提供的示例扩展脚本（像GLTFLoader、EXRLoader这类）都是UMD格式的，这种格式兼容普通<script>标签的引入方式，浏览器能直接识别执行。但从较新的版本（大概r150之后，包括你尝试的r172）开始，官方做了两个重要调整：

所有示例扩展组件全部转为ES模块格式，不再支持旧的UMD直接引入；
CDN上的文件路径变更：旧的examples/js/目录被废弃，取而代之的是examples/jsm/（jsm是ES Modules的缩写），继续访问旧路径会得到不存在或损坏的资源，这就是你看到NS_ERROR_CORRUPTED_CONTENT错误的核心原因。

另外，新版Three.js的核心库也更推荐使用ES模块版本（three.module.js），而不是旧的three.min.js，后者虽然部分CDN还保留，但和新的ES模块加载器搭配会有兼容性问题。

解决办法

要顺利使用新版Three.js的CDN资源，你需要改用ES模块的引入方式，具体步骤如下：

给脚本标签添加type="module"属性
浏览器需要明确知道这是ES模块代码，所以必须给script标签加上这个属性。
使用正确的CDN路径
- 核心库导入three.module.js而非旧的three.min.js；
- 加载器从examples/jsm/路径获取，而不是废弃的examples/js/。

给你一个可以直接复用的示例代码：

<script type="module">
  // 导入Three.js核心库
  import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r172/three.module.js';
  // 导入GLTFLoader
  import { GLTFLoader } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r172/examples/jsm/loaders/GLTFLoader.js';
  // 导入EXRLoader
  import { EXRLoader } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r172/examples/jsm/loaders/EXRLoader.js';

  // 接下来就可以正常编写你的Three.js代码了
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  // ...你的业务逻辑代码
</script>