jquery three.js的URL是什么,以便将其包含在联机中?

h5qlskok  于 2022-12-12  发布在  jQuery
关注(0)|答案(7)|浏览(127)

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
If this question is already asked then please provide the link.

vsnjm48y

vsnjm48y2#

最新的答案可以在three.js安装文档中找到。
提示:如果您正在进行调试,那么请使用three.js的非最小化版本--也就是说,不要使用three.min.js
第147号三条

bvuwiixz

bvuwiixz3#

截至2019-08,有一个ES6模块版本的three.js。如果你想使用它,你不能真正使用cloudflare(至少截至2019-09)。
更新:截至2021-04-23(r128)three.js更改了threejs npm模块的创建方式,因此不再与许多CDN兼容。他们建议使用www.skypack.dev
示例:
第一个

pkmbmrz7

pkmbmrz74#

这是Google托管的API。

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

lztngnrs5#

Though I'm answering this very late but I wanted to clarify a few things here for others.

Answer Criteria

While the official documentation recommends using the module, sometimes it's not possible to use the module-based code or any build tools like webpack.
This answer is for those developers, who want to use the Three.js latest libraries on the web apps which do not use ES6 module based architecture or any build tool.

  • So if you want to use Three.js on your npm or webpack based web application, follow their recommended official documentations only.*

Problem 1 (for non-module based web apps)

Three.js library is already moved to ES6 module based architecture so their official installation documentation shows how to use the module-based architecture-

<script type="module">
  // Find the latest version by visiting https://cdn.skypack.dev/three.
  import * as THREE from 'https://cdn.skypack.dev/three@<version>';

  const scene = new THREE.Scene();
</script>

So even if you browse to https://cdn.skypack.dev/three , you will get URLs of ES6 modules.

Problem 2 (Existing non-module URLs are outdated)

If you Google any three.js examples, almost all the blog posts use outdated URLs. For example-
https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js
The problem with these CDN URLs is that, if you replace r123 with the latest one (for example, r138 ), the URLs won't work. So you won't be able to use the latest releases as the three.js libraries are not updated on these CDNs.
Even if you get the latest three.js library, you will have a hardtime using the examples like OrbitControls .

Solution

The solution is quite simple. Since the three.js is always up-to-date on https://www.npmjs.com/ , you can use CDN providers like https://www.jsdelivr.com/ or https://unpkg.com to pick the assets from npm registry directly.
( skypack.dev & cdnjs.com seems to be far outdated to me)
Now, the URLs are pretty simple-

<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.min.js"></script>

The above URL will always point to the latest three.js release which might not be backward compatible with your code. So better to use the pinned versions-

<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/loaders/GLTFLoader.min.js"></script>

For other popular parts of the library — such as controls, loaders, and post-processing effects, make sure you are using examples/js not the examples/jsm as jsm stands for JS modules so it won't work with non-module codebase (took me 2-3 hours to spot this silly mistake).
Remember, you can always browse the directory by appending a / at the end-

ovfsdjhp

ovfsdjhp6#

You may include this in your html file:

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

or use three.min.js

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

4zcjmb1e7#

如果您担心库大小,您可以从PageCDN的three.js CDN链接,由于更好的压缩,three.js CDN比其他CDN17KB左右:

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

相关问题