Wie lautet die URL für three.js, um sie online einzubinden?

Ich versuche, eine Javascript-Anwendung in Google App Engine mit three.js zu erstellen, aber ich erhalte nicht die URL, um sie online in mein Dokument aufzunehmen. Ich möchte nicht das gesamte Paket three.js hochladen, das sehr groß ist. Ich wollte wissen, ob es eine Möglichkeit gibt, eine URL zum Einbinden der Bibliothek wie diese für jQuery zu erhalten: http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

Wenn diese Frage bereits gestellt wurde, geben Sie bitte den Link an.

Der Suchbegriff für Ihre Frage sollte lauten

drei js cdn

Was die folgenden Links erzeugt (für r128):

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

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

Die aktuellste Antwort findet sich in der three.js Installation Dokumente.

TIPP: Wenn Sie debuggen, verwenden Sie eine nicht-minifizierte Version von three.js – das heißt, nicht three.min.js.

three.js r.147

Ab 2019-08 gibt es eine ES6-Modulversion von three.js. Wenn Sie es verwenden möchten, können Sie Cloudflare nicht wirklich verwenden (zumindest ab 2019-09).

Update: Ab dem 23.04.2021 (r128) hat three.js die Art und Weise geändert, wie das npm-Modul von threejs erstellt wird, sodass es nicht mehr mit vielen CDNs kompatibel ist. Sie empfehlen verwenden www.skypack.dev

Beispiel:

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>

Das ist ein Von Google gehostete API.

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

Ich antworte zwar sehr spät, aber ich wollte hier ein paar Dinge für andere klarstellen.

Antwortkriterien

Während die offizielle Dokumentation die Verwendung des Moduls empfiehlt, ist es manchmal nicht möglich, den modulbasierten Code oder Build-Tools wie Webpack zu verwenden.

Diese Antwort richtet sich an Entwickler, die die neuesten Bibliotheken von Three.js in Web-Apps verwenden möchten, die keine auf ES6-Modulen basierende Architektur oder ein Build-Tool verwenden.

Wenn Sie also Three.js auf Ihrem verwenden möchten npm oder Webpaket basierte Webanwendung, befolgen Sie nur die empfohlenen offiziellen Dokumentationen.

Problem 1 (für nicht modulbasierte Web-Apps)

Die Three.js-Bibliothek wurde bereits auf die modulbasierte Architektur von ES6 verschoben, so dass sie offiziell ist Installationsdokumentation zeigt, wie man die modulbasierte Architektur verwendet

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

Also auch wenn Sie zu blättern https://cdn.skypack.dev/threeerhalten Sie URLs von ES6-Modulen.

Problem 2 (Bestehende Nicht-Modul-URLs sind veraltet)

Wenn Sie nach Beispielen für three.js googeln, verwenden fast alle Blogposts veraltete URLs. Zum Beispiel-

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

Das Problem mit diesen CDN-URLs ist, dass, wenn Sie ersetzen r123 mit dem neusten (z.B. r138), funktionieren die URLs nicht. Sie können also nicht die neuesten Versionen verwenden, da die three.js-Bibliotheken auf diesen CDNs nicht aktualisiert werden.

Selbst wenn Sie die neueste Bibliothek von three.js erhalten, werden Sie Schwierigkeiten haben, die Beispiele wie OrbitControls.

Lösung

Die Lösung ist ganz einfach. Da ist die three.js immer aktuell auf https://www.npmjs.com/können Sie CDN-Anbieter wie verwenden https://www.jsdelivr.com/ oder https://unpkg.com um die Assets direkt aus der npm-Registrierung auszuwählen.

(skypack.dev & cdnjs.com scheint mir veraltet zu sein)

Nun, die URLs sind ziemlich einfach-

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

Die obige URL verweist immer auf die neueste Version von three.js, die möglicherweise nicht abwärtskompatibel mit Ihrem Code ist. Verwenden Sie also besser die angehefteten Versionen.

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

Stellen Sie für andere beliebte Teile der Bibliothek – wie Steuerelemente, Ladeprogramme und Nachbearbeitungseffekte – sicher, dass Sie verwenden examples/js nicht der examples/jsm als jsm steht für JS-Module, daher funktioniert es nicht mit Nicht-Modul-Codebasis (ich habe 2-3 Stunden gebraucht, um diesen dummen Fehler zu erkennen).

Denken Sie daran, dass Sie das Verzeichnis jederzeit durchsuchen können, indem Sie a anhängen / Am Ende-

Sie können dies in Ihre HTML-Datei einfügen:

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

oder verwenden Sie three.min.js

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

Wenn Sie sich Sorgen über die Lib-Größe machen, können Sie von PageCDNs verlinken Three.js-CDN das ist um 17 KB kleiner im Vergleich zu anderen CDNs Wegen besserer Kompression:

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