如何从 cdn THREE.js 加载 GLTFLoader [英] How do I load GLTFLoader from a cdn THREE.js
问题描述
我在弄清楚如何让 GLTFLoader 在 THREE.js 中工作时遇到了一些问题.我不明白如何使用 cdn 站点来托管文件.我曾尝试使用网络上示例中的链接，但这对我来说并没有完成.我在另一篇文章中读到 GLTFLoader 文件必须与我正在使用的核心三个文件 (r121) 的版本相同.
I'm having some issues figuring out how to get GLTFLoader to work in THREE.js. I don't understand how to use a cdn site to host the file. I have tried using links from examples around the web but that hasn't done the job for me. I read on another post that the GLTFLoader file had to be the same versions the core THREE file I'm using (r121).
我想我可以去mrdoob github(不熟悉如何使用github)并单击原始文件，然后在githack等网站上使用该链接生成cdn链接并将其作为脚本添加到我的html中，或导入将它添加到我的 js 文件中，但这不起作用.
I thought I could go to mrdoob github (not familiar with how to use github) and click raw file then use that link on a site like githack to generate a cdn link and add it as a script in my html, or import it into my js file, but that didn't work.
如果这是这样做的，那么它就行不通了.在我输入的代码中:
If that is the way to do it then it's not working. In my code when I type in:
let loader = new GLTFLoader(); //from the docs
//or
let loader = new THREE.GLTFLoader(); //not from the docs
我收到以下两个错误中的一个:未捕获的 ReferenceError: GLTFLoader 未定义或者未捕获的类型错误:THREE.GLTFLoader 不是构造函数
I get one or the other of these two errors: Uncaught ReferenceError: GLTFLoader is not defined or Uncaught TypeError: THREE.GLTFLoader is not a constructor
我已经在这工作了几个小时，但不知道该怎么做.
I have been at this for hours and haven't a clue what to do.
CodePen https://codepen.io/jfirestorm44/pen/RwRPJda?editors=0010
如果重要的话，我正在关注的教程:https://tympanus.net/codrops/2019/10/14/how-to-create-an-interactive-3d-character-with-three-js/
The tutorial I'm following if it matters: https://tympanus.net/codrops/2019/10/14/how-to-create-an-interactive-3d-character-with-three-js/
推荐答案
确保你的 html 文件中的three.js 和 GLRFLoader 的导入放在你自己的脚本之前.我喜欢将自己的脚本放在 html 文件的最底部.
Make sure your imports for three.js and GLRFLoader in your html file are placed before your own script. I like to place my own scripts at the very bottom of my html file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js" integrity="sha512-yNJzAsg5JyP91u+sLHlUDULMBd3hmEiVkYeeN1cQBKaLZ7EyT6oH2u5THNIRM2Fu6VKcZJv+F/QAp1h/qzy9Ow==" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
更新:上面的 cdn 链接将始终指向最新的 GLTFLoader，它可能不向后兼容.改用特定标签:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js" integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
在您的脚本中，您不需要额外的导入，只需调用加载程序
In your script you won't need additional imports, just call the loader
const gltfLoader = new THREE.GLTFLoader();
换句话说，如果您使用上面提供的 html 导入，以下代码是多余的.
In other words, the following code is redundant given you use the html imports provided above.
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js";
import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/GLTFLoader.js";
工作示例:
index.html
<!DOCTYPE html>
<html>
<head>
<!-- css imports-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js" integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js">
</head>
<body>
<!-- body -->
</body>
<script type="text/javascript" src="/static/myscript.js"></script>
</html>
myscript.js
myscript.js
const gltfLoader = new THREE.GLTFLoader();
这篇关于如何从 cdn THREE.js 加载 GLTFLoader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
