Question

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

如果已经提出此问题，请提供链接。

Answer 1

请下载图书馆并在本地链接到该图书馆。

但是，如果您必须热链接，那么您可以直接链接到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 2

您的问题的搜索字词应为

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

这是Google hosted API。

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

Answer 4

截至2019-08年，存在three.js的ES6模块版本。如果要使用它，则不能真正使用cloudflare（至少从2019-09开始）。

问题是，如果您使用的是ES6模块，那么OrbitControls或EffectComposer或GLTFLoader模块之类的所有附加功能都具有对其依赖项的硬编码相对路径。

jsdeliver支持新的模块模式

https://cdn.jsdelivr.net/npm/three@v0.108.0/build/three.module.js
https://cdn.jsdelivr.net/npm/three@v0.108.0/examples/jsm/controls/OrbitControls.js

unpkg也是如此

https://unpkg.com/three@0.108.0/build/three.module.js
https://unpkg.com/three@0.108.0/examples/jsm/controls/OrbitControls.js

例如

import * as THREE from "https://cdn.jsdelivr.net/npm/three@v0.108.0/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/three@v0.108.0/examples/jsm/controls/OrbitControls.js";

重要的是，如果使用ES6模块，则无论使用哪种CDN，路径的这些部分必须相同

[https://cdn.jsdelivr.net/npm/three@v0.108.0/]  build/three.module.js
[https://cdn.jsdelivr.net/npm/three@v0.108.0/]  examples/jsm/controls/OrbitControls.js

如果它们不相同，那么将对three.js加载两次。

添加另外的three.module.js必须位于build文件夹中，而另一个 examples/jsm中的其他内容，因为在OrbitControls.js内部，Three.js的路径被硬编码为../../../build/three.module.js。如果路径不正确，则会出现错误。

border { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@v0.108.0/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/three@v0.108.0/examples/jsm/controls/OrbitControls.js";

const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(40, 2, 1, 10000 );
camera.position.set(20, 20, 20);

const controls = new OrbitControls(camera);
    
scene.add(new THREE.AmbientLight(0x222222));
    
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(20, 20, 0);
scene.add(light);
    
scene.add(new THREE.AxesHelper(20));

const geometry = new THREE.SphereGeometry(5, 12, 8);
    
const material = new THREE.MeshPhongMaterial({
    color: 0x00ffff, 
    flatShading: true,
    transparent: true,
    opacity: 0.7,
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

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);
</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

three.js库可在许多公共CDN上免费使用。

由于您担心文件的大小，由于更好的压缩，您可以从three.js CDN进行链接，而与其他CDN相比，该链接的链接约小17KB：

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

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

6 个答案: