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

Posted 2023-02-27

【中文标题】three.js 在线包含它的 URL 是啥？

【英文标题】：What is the URL for three.js to include it online?three.js 在线包含它的 URL 是什么？

【发布时间】：2014-06-19 12:39:01

【问题描述】：

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

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

【问题讨论】：

如果您担心链接文件的大小，请参阅：***.com/a/57018763/369005

【参考方案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

【讨论】：

不工作了，使用下面的答案。

仍然为我工作。但无论如何，我今天更新了 cloudflare 上最新可用的答案（注意它不是最新发布的）。

哦，可能只是我?

【参考方案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

【讨论】：

我注意到 Google 托管了three.js，请参阅...developers.google.com/speed/libraries/#threejs 但是，它是否也托管了示例和其他重要的实用程序（我相信）没有托管在主要的“three.min”中.js”？如果希望链接到预托管的three.js，上述内容仍然成立吗？

绝对不要使用threejs.org，这不是它的意图。这有效：cdnjs.com/libraries/three.js 具有版本控制的优势。

cdnjs.com 链接无效。截至目前的最新版本：cloudfare.com = R83； googleapis.com = R84； threejs.org = R95

唯一对我有用的答案，只需要用 https 替换 http，谢谢！

【参考方案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>

【参考方案4】：

这是Google hosted API。

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

【参考方案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>

【参考方案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>