¿Cuál es la URL de three.js para incluirlo en línea?

Estoy tratando de hacer una aplicación de JavaScript en el motor de aplicaciones de Google usando three.js pero no obtengo la URL para incluirla en línea en mi documento. No quiero cargar todo el paquete three.js, que es muy grande. Quería saber si había alguna manera de obtener una URL para incluir la biblioteca como esta para jQuery: http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

Si ya se hizo esta pregunta, proporcione el enlace.

El término de búsqueda para su pregunta debe ser

tres js cdn

Lo que produce los siguientes enlaces (para r128):

https://cdnjs.cloudflare.com/ajax/libs/tres.js/r128/tres.js

https://cdnjs.cloudflare.com/ajax/libs/tres.js/r128/tres.min.js

La respuesta más actualizada se puede encontrar en three.js instalación documentos

SUGERENCIA: si está depurando, use una versión no minimizada de three.js, es decir, no three.min.js.

tres.js r.147

A partir de 2019-08, hay una versión del módulo ES6 de three.js. Si desea usarlo, realmente no puede usar cloudflare (al menos a partir de 2019-09).

Actualización: a partir del 2021-04-23 (r128), three.js cambió la forma en que se crea el módulo threejs npm, por lo que ya no es compatible con muchas CDN. Ellos recomiendan usando www.skypack.dev

Ejemplo:

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>

Esto es un API alojada en Google.

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

Aunque estoy respondiendo esto muy tarde, quería aclarar algunas cosas aquí para otros.

Criterios de respuesta

Si bien la documentación oficial recomienda usar el módulo, a veces no es posible usar el código basado en el módulo o cualquier herramienta de compilación como el paquete web.

Esta respuesta es para aquellos desarrolladores que desean usar las últimas bibliotecas Three.js en las aplicaciones web que no usan la arquitectura basada en módulos ES6 ni ninguna herramienta de compilación.

Entonces, si desea usar Three.js en su npm o paquete web aplicación web basada, siga únicamente las documentaciones oficiales recomendadas.

Problema 1 (para aplicaciones web no basadas en módulos)

La biblioteca Three.js ya se movió a la arquitectura basada en el módulo ES6, por lo que es oficial documentación de instalación muestra cómo usar la arquitectura basada en módulos-

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

Así que incluso si navegas a https://cdn.skypack.dev/tresobtendrá las URL de los módulos ES6.

Problema 2 (las URL que no son módulos existentes están desactualizadas)

Si busca en Google ejemplos de tres.js, casi todas las publicaciones de blog usan URL obsoletas. Por ejemplo-

https://cdnjs.cloudflare.com/ajax/libs/tres.js/r123/tres.min.js

El problema con estas URL de CDN es que, si reemplaza r123 con la última (por ejemplo, r138), las URL no funcionarán. Por lo tanto, no podrá usar las últimas versiones ya que las bibliotecas de three.js no están actualizadas en estos CDN.

Incluso si obtiene la última biblioteca de tres.js, tendrá dificultades para usar los ejemplos como OrbitControls.

Solución

La solución es bastante simple. Dado que three.js siempre está actualizado en https://www.npmjs.com/puede usar proveedores de CDN como https://www.jsdelivr.com/ o https://unpkg.com para elegir los activos del registro de npm directamente.

(skypack.dev & cdnjs.com parece estar muy desactualizado para mí)

Ahora, las URL son bastante simples:

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

La URL anterior siempre apuntará a la última versión de three.js que podría no ser compatible con versiones anteriores de su código. Así que mejor usar las versiones ancladas-

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

Para otras partes populares de la biblioteca, como controles, cargadores y efectos de posprocesamiento, asegúrese de estar usando examples/js no la examples/jsm como jsm significa módulos JS, por lo que no funcionará con una base de código que no sea un módulo (me tomó de 2 a 3 horas detectar este error tonto).

Recuerde, siempre puede navegar por el directorio agregando un / al final-

Puede incluir esto en su archivo html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.js"></script>

o usa tres.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>

Si le preocupa el tamaño de lib, puede vincular desde PageCDN’s tres.js CDN eso esta alrededor 17 KB más pequeño en comparación con otros CDN debido a una mejor compresión:

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