Question

我在弄清楚如何使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

我得到以下两个错误之一：未捕获的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/

Answer 1

确保将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>

在脚本中，您不需要其他导入，只需调用加载程序

const gltfLoader = new THREE.GLTFLoader();

换句话说，鉴于您使用上面提供的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";

工作示例：

index.html

<!DOCTYPE html>
<html>
    <head>
        <!-- css imports-->
        <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>
    </head>
    <body>
      <!-- body -->
    </body>

    <script type="text/javascript" src="/static/myscript.js"></script>
</html>

myscript.js

const gltfLoader = new THREE.GLTFLoader();

如何从CD THREE.js加载GLTFLoader

1 个答案: