我在弄清楚如何让 GLTFLoader 在 THREE.js 中工作时遇到了一些问题。我不明白如何使用 cdn 站点来托管文件。我曾尝试使用网络上示例中的链接,但这对我来说并没有完成。我在另一篇文章中读到 GLTFLoader 文件必须与我正在使用的核心三个文件 (r121) 的版本相同。
我想我可以去 mrdoob github(不熟悉如何使用 github)并单击原始文件,然后在 githack 等网站上使用该链接生成 cdn 链接并将其添加为我的 html 中的脚本,或将其导入我的js 文件,但这不起作用。
如果这是这样做的方法,那么它就行不通了。在我输入的代码中:
let loader = new GLTFLoader(); //from the docs
//or
let loader = new THREE.GLTFLoader(); //not from the docs
Run Code Online (Sandbox Code Playgroud)
我收到以下两个错误中的一个:未捕获的 ReferenceError:未定义 GLTFLoader 或未捕获的 TypeError:THREE.GLTFLoader 不是构造函数
我已经在这里待了几个小时,但不知道该怎么做。
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/
Eir*_*ron 10
确保你的 html 文件中的 Three.js 和 GLRFLoader 的导入放在你自己的脚本之前。我喜欢将自己的脚本放在 html 文件的最底部。
<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>
Run Code Online (Sandbox Code Playgroud)
更新:上面的 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>
Run Code Online (Sandbox Code Playgroud)
在您的脚本中,您不需要额外的导入,只需调用加载程序
const gltfLoader = new THREE.GLTFLoader();
Run Code Online (Sandbox Code Playgroud)
换句话说,鉴于您使用上面提供的 html 导入,以下代码是多余的。
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";
Run Code Online (Sandbox Code Playgroud)
工作示例:
索引.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>
Run Code Online (Sandbox Code Playgroud)
我的脚本.js
const gltfLoader = new THREE.GLTFLoader();
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
5625 次 |
最近记录: |