javascript 三.js 在线包含它的 URL 是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23434732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the URL for three.js to include it online?
提问by goodbytes
I am trying to make a javascript application in google app engine using three.js but I am not getting the URL to include it online in my document. I dont want to upload the whole three.js package, which is very big in size. I wanted to know if there was a way I can get URL to include the library just like this one for jQuery : http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js
我正在尝试使用three.js 在谷歌应用引擎中创建一个javascript 应用程序，但我没有获得将其在线包含在我的文档中的URL。我不想上传整个three.js包，它的大小非常大。我想知道是否有一种方法可以让 URL 包含库，就像 jQuery 一样：http: //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js
If this question is already asked then please provide the link.
如果已经问过这个问题，请提供链接。
回答by Michael Litvin
The search term for your question should be
您问题的搜索词应该是
three js cdn
三个js cdn
Which produces the following links (for r71):
产生以下链接（对于 r71）：
https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js
https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js
https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js
https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js
回答by WestLangley
Please download the library and link to it locally.
请下载该库并在本地链接到它。
However, if you must hot-link, then you can link to the three.js site directly.
但是，如果您必须热链接，那么您可以直接链接到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>
TIP: If you are debugging, then use the un-minified version of three.js -- three.js-- not three.min.js.
提示：如果您正在调试，请使用three.js 的未缩小版本 -- three.js-- 不three.min.js。
three.js r.67
三.js r.67
回答by cdiggins
This is a Google hosted API.
这是一个Google 托管的 API。
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
回答by gman
As of 2019-08 there is a ES6 module version of three.js. If you want to use it you can't really use cloudflare (at least as of 2019-09).
截至 2019 年 8 月，存在 Three.js 的 ES6 模块版本。如果你想使用它，你不能真正使用 cloudflare（至少从 2019-09 开始）。
The issue is if you're using ES6 modules then all the extras like OrbitControlsor EffectComposeror GLTFLoadermodules have hard coded relative paths to their dependencies.
问题是，如果您使用的是 ES6 模块，那么所有附加功能（如OrbitControls或EffectComposer或GLTFLoader模块）都具有指向其依赖项的硬编码相对路径。
jsdeliver does support the new module mode
jsdeliver 确实支持新的模块模式
https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js
https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js
so does unpkg
unpkg 也是如此
https://unpkg.com/[email protected]/build/three.module.js
https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js
For example
例如
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";
It's important that no matter what CDN you use if you're using ES6 modules then these parts of paths MUST BE THE SAME
重要的是，无论您使用什么 CDN，如果您使用的是 ES6 模块，那么路径的这些部分必须相同
[https://cdn.jsdelivr.net/npm/[email protected]/] build/three.module.js
[https://cdn.jsdelivr.net/npm/[email protected]/] examples/jsm/controls/OrbitControls.js
If they are not the same then three.js will be loaded twice.
如果它们不相同，那么three.js 将被加载两次。
Add further three.module.jsmust be in the buildfolder and the other
extras in the examples/jsmbecause inside OrbitControls.jsthe path to three.js is hard coded as ../../../build/three.module.js. If the paths are not correct you'll get an error.
进一步添加three.module.js必须在build文件夹中，而其他额外内容必须在文件夹中，examples/jsm因为在OrbitControls.jsThree.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/[email protected]/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/[email protected]/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>回答by DrCristianstein
You may include this in your html file:
您可以将其包含在您的 html 文件中：
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.js"></script>
or use three.min.js
或使用three.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
回答by Hamid Sarfraz
If you are concerned about lib size, you can link from PageCDN's three.js CDNthat is around 17KB smaller compared to other CDNsdue to better compression:
如果您担心 lib 大小，您可以从 PageCDN 的Three.js CDN链接，由于更好的压缩，它比其他 CDN 小 17KB左右：
<script src="https://pagecdn.io/lib/three/106/three.min.js" integrity="sha256-tAVw6WRAXc3td2Esrjd28l54s3P2y7CDFu1271mu5LE=" crossorigin="anonymous"></script>
