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.

回答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

回答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

回答3:

This is a Google hosted API.

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

回答4:

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>

回答5:

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>

回答6:

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>

来源：https://stackoverflow.com/questions/23434732/what-is-the-url-for-three-js-to-include-it-online

标签

javascript

jquery

three.js