I'm creating a webpage that uses Three.js.
If I use all CDN links from Version 128, my page loads fine:
<script src=".js/r128/three.min.js"></script>
<script src="/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="/[email protected]/examples/js/loaders/EXRLoader.js"></script>
But I would like to use the most recent version for my project, and according to cdnjs that is version 172.
Switching to this more recent version (172) causes everything to break:
<script src=".js/r172/three.min.js"></script>
<script src="/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="/[email protected]/examples/js/loaders/EXRLoader.js"></script>
My browser's console reads:
GET
.js/r172/three.min.js
NS_ERROR_CORRUPTED_CONTENT
GET
/[email protected]/examples/js/loaders/GLTFLoader.js
NS_ERROR_CORRUPTED_CONTENT
GET
/[email protected]/examples/js/loaders/EXRLoader.js
NS_ERROR_CORRUPTED_CONTENT
And naturally, this is followed by more errors that result from not being able to read the scripts.
Apparently I missed the memo on the unspoken rules of which CDN assets are okay to use and which aren't, and how to look that info up and/or resolve the problem. Can someone please enlighten me? How can I successfully use the current (or at least a recent) version of Three.js through a CDN?
Post-resolution edit:
As a side note, when importing loaders like EXRLoader.js, people might find it easier to install Three.js and serve the files themselves. Then use importmap to resolve the module paths.
Alternatively, the Express framework for Node.js can be used to serve the files and resolve the paths. Or, a bundler like Vite, Webpack, or Parcel can resolve them.
These tools are beyond the scope of this question, but related to it.
I'm creating a webpage that uses Three.js.
If I use all CDN links from Version 128, my page loads fine:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/EXRLoader.js"></script>
But I would like to use the most recent version for my project, and according to cdnjs that is version 172.
Switching to this more recent version (172) causes everything to break:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r172/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/EXRLoader.js"></script>
My browser's console reads:
GET
https://cdnjs.cloudflare.com/ajax/libs/three.js/r172/three.min.js
NS_ERROR_CORRUPTED_CONTENT
GET
https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js
NS_ERROR_CORRUPTED_CONTENT
GET
https://unpkg.com/[email protected]/examples/js/loaders/EXRLoader.js
NS_ERROR_CORRUPTED_CONTENT
And naturally, this is followed by more errors that result from not being able to read the scripts.
Apparently I missed the memo on the unspoken rules of which CDN assets are okay to use and which aren't, and how to look that info up and/or resolve the problem. Can someone please enlighten me? How can I successfully use the current (or at least a recent) version of Three.js through a CDN?
Post-resolution edit:
As a side note, when importing loaders like EXRLoader.js, people might find it easier to install Three.js and serve the files themselves. Then use importmap to resolve the module paths.
Alternatively, the Express framework for Node.js can be used to serve the files and resolve the paths. Or, a bundler like Vite, Webpack, or Parcel can resolve them.
These tools are beyond the scope of this question, but related to it.
Share Improve this question edited Jan 22 at 8:49 DarkBee 15.7k8 gold badges70 silver badges114 bronze badges asked Jan 20 at 1:59 MentalistMentalist 1,6331 gold badge20 silver badges45 bronze badges1 Answer
Reset to default 2If you look at your URL, you'll see it doesn't match anything in the screenshot of the CDN's available URL's.
Try this:
https://cdnjs.cloudflare.com/ajax/libs/three.js/0.172.0/three.core.min.js
Did you get that malformed URL from the 'copy' button on the cloudflare site? If you did, you might need to report it as an error, it looks like they changed the way they construct the URL from the version number.
In future, you can also check an script source by just pasting the URL into the browser. It should open as plaintext javascript. If you do this with the busted URL you were using, you'll see that it returns a 404 page as HTML. This triggers a NS_ERROR_CORRUPTED_CONTENT warning as a <script> tag import, because HTML content is not valid javascript content.
edit: I should have mentioned, the actual library documentation is always a good place to look:
https://threejs.org/docs/index.html#manual/en/introduction/Installation.
From the folder structure on three's CDN, provided unpkg is following that, it should be:
https://unpkg.com/[email protected]/examples/jsm/loaders/EXRLoader.js