Why do CDN links for Three.js r172 fail with NS_ERROR_CORRUPTED_CONTENT while r128 works?

The problem is due to changes in how Three.js and its examples are distributed. In older versions (like r128), the examples were provided in a non‑module UMD format, which worked fine as simple

Below are a few ways to address the issue:

---

1. Use ES Modules

Convert your scripts to module imports. For example:

HTMLCopied
<script type="module">
  import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r172/three.module.js';
  import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/loaders/GLTFLoader.js';
  import { EXRLoader } from 'https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/loaders/EXRLoader.js';

  // Your Three.js code here
</script>

Note that:

• You now import the ES module version of Three.js (three.module.js) instead of the non‑module build.
• You import loaders from the /jsm/ directory, which provides ES modules.

---

2. Self-Host the Assets and/or Use a Bundler

If you’d rather keep using non‑module scripts or need more control (for example, because you have older code), you can install Three.js via npm, and then either:

• Self-host the files:
  Serve the files yourself and adjust import maps to resolve module paths as needed.

• Use a bundler (like Vite, Webpack, or Parcel):
  This offers a streamlined way to bundle your code and assets, handling module resolution for you.

---

3. Use a CDN That Provides the Correct Formats

Some CDNs (such as jsDelivr or Skypack) work seamlessly with ES modules. For instance, you can use Skypack to load modules like this:

HTMLCopied
<script type="module">
  import * as THREE from 'https://cdn.skypack.dev/three@0.172.0?min';
  import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.172.0/examples/jsm/loaders/GLTFLoader.js';
  import { EXRLoader } from 'https://cdn.skypack.dev/three@0.172.0/examples/jsm/loaders/EXRLoader.js';

  // Your Three.js code here
</script>

Skypack will ensure you get ES modules that are optimized for direct browser use.

---

Summary

The NS_ERROR_CORRUPTED_CONTENT error arises because you’re trying to load files that are now structured as ES modules using the old method. The recommended fixes are:

• Use the ES module version of Three.js and its loaders.
• Switch your script tags to type="module".
• Consider using a bundler or self‑hosting if you need to work with legacy code.

By updating your approach, you can successfully use the recent version of Three.js through a CDN.