What is the URL for three.js to include it online?

Question

I am trying to make a javascript application in google app engine using three.js but I am not getting the URL to include it online in my document. I dont want to upload the who

Answer 1

As of 2019-08 there is a ES6 module version of three.js. If you want to use it you can't really use cloudflare (at least as of 2019-09).

The issue is if you're using ES6 modules then all the extras like OrbitControls or EffectComposer or GLTFLoader modules have hard coded relative paths to their dependencies.

jsdeliver does support the new module mode

https://cdn.jsdelivr.net/npm/three@v0.108.0/build/three.module.js
https://cdn.jsdelivr.net/npm/three@v0.108.0/examples/jsm/controls/OrbitControls.js

so does unpkg

https://unpkg.com/three@0.108.0/build/three.module.js
https://unpkg.com/three@0.108.0/examples/jsm/controls/OrbitControls.js

For example

import * as THREE from "https://cdn.jsdelivr.net/npm/three@v0.108.0/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/three@v0.108.0/examples/jsm/controls/OrbitControls.js";

It's important that no matter what CDN you use if you're using ES6 modules then these parts of paths MUST BE THE SAME

[https://cdn.jsdelivr.net/npm/three@v0.108.0/]  build/three.module.js
[https://cdn.jsdelivr.net/npm/three@v0.108.0/]  examples/jsm/controls/OrbitControls.js

If they are not the same then three.js will be loaded twice.

Add further three.module.js must be in the build folder and the other extras in the examples/jsm because inside OrbitControls.js the path to three.js is hard coded as ../../../build/three.module.js. If the paths are not correct you'll get an error.

border { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }