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

Answer 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

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

这是一个Google 托管的 API 。

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

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

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>

Answer 7

如果您担心 lib 大小，您可以从 PageCDN 的three.js CDN链接，由于更好的压缩，它比其他 CDN 小 17KB左右：

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