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

The search term for your question should be

three js cdn

Which produces the following links (for r71):

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

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

Answer 2

Please download the library and link to it locally.

However, if you must hot-link, then you can link to the three.js site directly.

<script src="http://threejs.org/build/three.min.js"></script>

<script src="http://threejs.org/examples/js/libs/tween.min.js"></script>

<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

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

three.js r.67

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

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; }

<script type="module">
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";

const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(40, 2, 1, 10000 );
camera.position.set(20, 20, 20);

const controls = new OrbitControls(camera);
    
scene.add(new THREE.AmbientLight(0x222222));
    
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(20, 20, 0);
scene.add(light);
    
scene.add(new THREE.AxesHelper(20));

const geometry = new THREE.SphereGeometry(5, 12, 8);
    
const material = new THREE.MeshPhongMaterial({
    color: 0x00ffff, 
    flatShading: true,
    transparent: true,
    opacity: 0.7,
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

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);
</script>

Answer 4

This is a Google hosted API.

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

Answer 5

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>

Answer 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>