three.js 在线包含它的 URL 是什么？

Question

我正在尝试使用 three.js 在谷歌应用引擎中制作一个 javascript 应用程序，但我没有获得将其在线包含在我的文档中的 URL。我不想上传整个three.js 包，体积很大。我想知道是否有一种方法可以让 URL 包含库，就像 jQuery 一样：http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

如果这个问题已经被问到，那么请提供链接。

Answer 1

您的问题的搜索词应该是

三个js cdn

生成以下链接（对于 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

请下载库并链接到本地​​。

但是，如果一定要热链接，那么可以直接链接到three.js网站。

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

提示：如果您正在调试，请使用未缩小版的three.js -- three.js -- 而不是three.min.js。

three.js r.67

Answer 3

截至 2019 年 8 月，three.js 有一个 ES6 模块版本。如果你想使用它，你就不能真正使用 cloudflare（至少在 2019-09 年）。

更新：从 2021 年 4 月 23 日 (r128) 开始，three.js 更改了threejs npm 模块的创建方式，因此它不再与许多 CDN 兼容。 They recommend 使用 www.skypack.dev

例子：

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>

Answer 4

这是Google hosted API。

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

Answer 5

你可以在你的 html 文件中包含这个：

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

或使用three.min.js

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

Answer 6

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

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