CODEWITHSUNDEEP
javascriptjquerythree.js
goodbytes
goodbytes

Reputation: 438

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

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.

Upvotes: 23

Views: 40914

Answers (8)

Gangula
Gangula

Reputation: 7334

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/[email protected]/build/three.min.js"></script>

// OrbitControls cdn script
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>

// TrackballControls cdn script
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/TrackballControls.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>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/stats.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

Please feel free to add more.

Example Usage:

var renderer, scene, camera, cube;

var ww = window.innerWidth,
  wh = window.innerHeight;

function init() {

  renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('scene')
  });
  renderer.setSize(ww, wh);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000);
  camera.position.set(0, 0, 500);
  scene.add(camera);

  //Generate cube on the scene
  createCube();
}


var createCube = function() {

  //Simple box geometry
  var geometry = new THREE.BoxGeometry(150, 150, 150);

  //Create a basic material with green color
  var basicMaterial = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });

  //Create a material just for the wireframe
  var wireframeMaterial = new THREE.MeshBasicMaterial({
    wireframe: true
  });

  //createMultiMaterialObject will create a Mesh for each material in the array
  //We will get 2 cubes in a 3D object
  //You can check with the console that the scene has 2 children, the camera and a 3D object
  //The 3D object contains 2 Mesh with respective material (color for the 1st and wireframe for the 2nd)
  cube = THREE.SceneUtils.createMultiMaterialObject(geometry, [basicMaterial, wireframeMaterial]);

  //Add my cube on the scene
  if (scene) {
    scene.add(cube);
  }

  //Launch animation of the scene
  render();
};

var render = function() {
  requestAnimationFrame(render);

  if (cube) {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  }


  renderer.render(scene, camera);
};

init();
body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
<canvas id="scene"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

Upvotes: 1

WestLangley
WestLangley

Reputation: 104843

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

Upvotes: 16

Shashank Agrawal
Shashank Agrawal

Reputation: 25807

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/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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-

enter image description here

Upvotes: 4

user128511
user128511

Reputation:

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>

Upvotes: 8

Michael Litvin
Michael Litvin

Reputation: 4136

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

Upvotes: 23

Hamid Sarfraz
Hamid Sarfraz

Reputation: 1135

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>

Upvotes: -1

user6879068
user6879068

Reputation:

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>

Upvotes: 0

cdiggins
cdiggins

Reputation: 18243

This is a Google hosted API. 

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

Upvotes: 4

Related Questions