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

其中产生以下链接(对于r71):

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

https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/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-04-23 (r128)three.js 更改了 Threejs npm 模块的创建方式，因此它不再与许多 CDN 兼容。他们推荐使用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>