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 whole three.js package, which is very big in size. I wanted to know if there was a way I can get URL to include the library just like this one for jQuery : http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js
If this question is already asked then please provide the link.
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
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
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>
This is a Google hosted API.
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
Though I'm answering this very late but I wanted to clarify a few things here for others.
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.
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.
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.
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-
Below is the list of all the possible cdn imports related to Three.js. I'm hoping this to be the one place to get all cdn script links for future reference.
// Three.js cdn script
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/build/three.min.js"></script>
// OrbitControls cdn script
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/controls/OrbitControls.min.js"></script>
// GLTF loader cdn script
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
// dat.Gui cdn script
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
Please feel free to add more.
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>
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>
