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

Question 1

The search term for your question should be

three js cdn

Which produces the following links (for r128):

https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js

Question 2

The most up-to-date answer can be found in the three.js installation docs.

TIP: If you are debugging, then use an un-minified version of three.js -- that is, not three.min.js.

three.js r.147

Question 3

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).

Update: As of 2021-04-23 (r128) three.js changed the way the threejs npm module is created so it so no longer compatible with many CDNs. They recommend using www.skypack.dev

Example:

html, body { margin: 0; height: 100%; }
canvas { width: 100%; height: 100%; display block; }

<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/three';
import {OrbitControls} from 'https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 45;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 10, 20);

  function updateCamera() {
    camera.updateProjectionMatrix();
  }

  const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 5, 0);
  controls.update();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('black');

  {
    const planeSize = 40;

    const loader = new THREE.TextureLoader();
    const texture = loader.load('https://threejsfundamentals.org/threejs/resources/images/checker.png');
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.magFilter = THREE.NearestFilter;
    const repeats = planeSize / 2;
    texture.repeat.set(repeats, repeats);

    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
    const planeMat = new THREE.MeshPhongMaterial({
      map: texture,
      side: THREE.DoubleSide,
    });
    const mesh = new THREE.Mesh(planeGeo, planeMat);
    mesh.rotation.x = Math.PI * -.5;
    scene.add(mesh);
  }
  {
    const cubeSize = 4;
    const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
    const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
    const mesh = new THREE.Mesh(cubeGeo, cubeMat);
    mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
    scene.add(mesh);
  }
  {
    const sphereRadius = 3;
    const sphereWidthDivisions = 32;
    const sphereHeightDivisions = 16;
    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
    const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
    const mesh = new THREE.Mesh(sphereGeo, sphereMat);
    mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
    scene.add(mesh);
  }

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(0, 10, 0);
    light.target.position.set(-5, 0, 0);
    scene.add(light);
    scene.add(light.target);
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render() {

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();
</script>

Question 4

This is a Google hosted API.

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>

Question 5

Though I'm answering this very late but I wanted to clarify a few things here for others.

Answer Criteria

While the official documentation recommends using the module, sometimes it's not possible to use the module-based code or any build tools like webpack.

This answer is for those developers, who want to use the Three.js latest libraries on the web apps which do not use ES6 module based architecture or any build tool.

So if you want to use Three.js on your npm or webpack based web application, follow their recommended official documentations only.

Problem 1 (for non-module based web apps)

Three.js library is already moved to ES6 module based architecture so their official installation documentation shows how to use the module-based architecture-

<script type="module">
  // Find the latest version by visiting https://cdn.skypack.dev/three.
  import * as THREE from 'https://cdn.skypack.dev/three@<version>';

  const scene = new THREE.Scene();
</script>

So even if you browse to https://cdn.skypack.dev/three, you will get URLs of ES6 modules.

Problem 2 (Existing non-module URLs are outdated)

If you Google any three.js examples, almost all the blog posts use outdated URLs. For example-

https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js

The problem with these CDN URLs is that, if you replace r123 with the latest one (for example, r138), the URLs won't work. So you won't be able to use the latest releases as the three.js libraries are not updated on these CDNs.

Even if you get the latest three.js library, you will have a hardtime using the examples like OrbitControls.

Solution

The solution is quite simple. Since the three.js is always up-to-date on https://www.npmjs.com/, you can use CDN providers like https://www.jsdelivr.com/ or https://unpkg.com to pick the assets from npm registry directly.

(skypack.dev & cdnjs.com seems to be far outdated to me)

Now, the URLs are pretty simple-

<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.min.js"></script>

The above URL will always point to the latest three.js release which might not be backward compatible with your code. So better to use the pinned versions-

<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/loaders/GLTFLoader.min.js"></script>

For other popular parts of the library — such as controls, loaders, and post-processing effects, make sure you are using examples/js not the examples/jsm as jsm stands for JS modules so it won't work with non-module codebase (took me 2-3 hours to spot this silly mistake).

Remember, you can always browse the directory by appending a / at the end-

Question 6

You may include this in your html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.js"></script>

or use three.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>

Question 7

If you are concerned about lib size, you can link from PageCDN's three.js CDN that is around 17KB smaller compared to other CDNs due to better compression:

<script src="https://pagecdn.io/lib/three/106/three.min.js" integrity="sha256-tAVw6WRAXc3td2Esrjd28l54s3P2y7CDFu1271mu5LE=" crossorigin="anonymous"></script>