程序员经验分享-hwhale

如何从 cdn THREE.js 加载 GLTFLoader

2024-03-21

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

我收到以下两个错误之一： 未捕获的引用错误：GLTFLoader 未定义 或者 未捕获的类型错误：THREE.GLTFLoader 不是构造函数

我已经在这个问题上呆了几个小时了，不知道该怎么做。

CodePen https://codepen.io/jfirestorm44/pen/RwRPJda?editors=0010 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/ https://tympanus.net/codrops/2019/10/14/how-to-create-an-interactive-3d-character-with-three-js/


确保 html 文件中的 Three.js 和 GLTFLoader 的导入放置在您自己的脚本之前。我喜欢将自己的脚本放在 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>

更新：上面的 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/[email protected] /cdn-cgi/l/email-protection/examples/js/loaders/GLTFLoader.js"></script>

在您的脚本中，您不需要额外的导入，只需调用加载器

const gltfLoader = new THREE.GLTFLoader();

换句话说，如果您使用上面提供的 html 导入，以下代码是多余的。

import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/build/three.module.js";
import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/examples/jsm/loaders/GLTFLoader.js";

工作示例：

索引.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/[email protected] /cdn-cgi/l/email-protection/examples/js/loaders/GLTFLoader.js">
    </head>
    <body>
      <!-- body -->
    </body>

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

myscript.js

const gltfLoader = new THREE.GLTFLoader();
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

threeJs

GLTF

如何从 cdn THREE.js 加载 GLTFLoader 的相关文章

  • 使用三个 JS 和 React JS 加载 GLTF 模型

    我使用 React JS 加载从 sketchfab 下载的 GLTF 文件时遇到问题 当我尝试在不使用React 使用常规index html和index js 的情况下执行此操作时 它可以工作 但是当我将代码带入React应用程序时 它

  • 在 React 中渲染 Three.js 元素？

    我正在尝试制作一个渲染 Three js 场景的 React 组件 但是 每当我尝试安装组件而不是看到正在渲染的任何类型的场景时 我只看到文本 object HTMLCanvasElement 正在显示 这是我的组件 import Reac

  • 动画 GIF 作为 THREE.js 中的纹理

    我正在寻找一种在 THREE js 中使用 GIF 动画作为纹理的方法 我目前可以加载纹理 甚至是 GIF 格式 但它无法播放动画 有什么办法可以做到吗 我发现了一些像这样的链接 https github com JordiRos GLGi

  • 三.js Raycaster intersectObjects

    我正在尝试修改这个例子 https github com timoxley threejs blob master examples webgl morphtargets md2 control html来自 Three js 通过鼠标点击

  • 一次性渲染阴影

    考虑到阴影投射的成本 我想知道对于动态定位的静态对象 例如 程序城市 是否有一个功能或可能 实验性的方法可以在 Three js 中仅渲染一次阴影贴图 甚至在 webgl 中 因此 结果可以在静态对象的下一帧中免费使用 仅当物体移动时才会进

  • Three.js 光线投射器可以与组相交吗？

    我想知道我的光线投射器是否正在查看我已加载的 OBJ 由于从 Cinema4D 导出的方式 我相信 OBJ 是一个具有 3 个子级的 THREE Group 而不是 THREE Object 我可以更改我的 raycaster 代码行来查找

  • 在 TypeScript 中使用三个 Js + OrbitControl

    我无法得到this http www example com 在 TypeScript 中使用上述组合的示例 I have and 在我的html中和打字稿文件

  • Three.js 设置并读取相机外观向量

    而不是使用camera rotation或lookAt 函数旋转相机 我想将外观矢量直接传递给相机 是否可以直接设置相机外观矢量以及是否可以从相机读取外观矢量 相机没有 外观矢量 因此无法设置它 但是 您可以构造一个point通过将您的外观

  • （A 框架）本地 gltf 不会加载；无法读取未定义的属性“切片”

    我从A型框架学校 https aframe io aframe school 11其中加载了 gltf 模型 然后我从 Khronos 加载了示例模型 this box https github com KhronosGroup glTF

  • 三.js环境光意想不到的效果

    在下面的代码中 我渲染了一些立方体并使用点光源和环境光照亮它们 然而 当设置为 0xffffff 时 AmbientLight 会将侧面的颜色更改为白色 无论其指定的颜色如何 奇怪的是 点光源按预期工作 我怎样才能使环境光表现得像点光 因为

  • ThreeJS 中阴影的奇怪行为

    所以我有一个 ThreeJS 场景 并且添加了一些球体 多材质 我还添加了定向光 this light new THREE DirectionalLight 0xFFFFFF 1 this light position set 2 10 2

  • 如何使用键盘和鼠标控制相机 - Three.js

    我在 WEB GL 中有一个带有 Three js 的 3D 环境 并且我曾经使用 Orbitcontrols js http codepen io nireno pen cAoGI http codepen io nireno pen c

  • ThreeJS 动画光色

    我制作了一个定向灯 我想随着时间的推移改变颜色 我正在阅读文档 http threejs org docs index html Reference Math Color 但仍然没有启动并运行 在初始化之前我声明变量 var rmapped

  • .points 不透明度/大小在三个.js 内

    我回来回答有关 points 的第二个问题 这次想知道如何将不透明度从 0 更改为 1 然后又回到距发射器的特定像素距离内 var particleCount 14 particles new THREE Geometry pMateria

  • Three.js点击单个粒子

    In this example http jsfiddle net agqq96bq 2 您可以看到 2 个可点击的粒子 但它们都受到点击的影响 另外 我只想检测粒子上的点击 而不将它们过滤出场景 像这儿 if intersects len

  • 计算顶点法线

    我正在使用 3d 修改器https github com foo123 MOD3 https github com foo123 MOD3弯曲一个立方体 几何体更新 顶点位置更改 后 灯光不会更新 立方体仍然着色 就好像没有任何变化一样 所

  • Three.js - 重叠层闪烁

    当多个物体重叠在同一平面上时 它们开始闪烁 如何告诉渲染器将其中一个对象放在前面 我尝试使用 renderDepth 但它只能部分起作用 请参阅此处的示例 http liveweave com ahTdFQ http liveweave c

  • 为什么环境光在此示例中不起作用？

    在以下示例中 环境光不起作用 一切都是黑色的 为什么会发生这种情况 我该如何解决它 如果我放聚光灯 它就可以工作 所以环境光一定有问题 但我遵循了文档 O

  • Three.js - 如何使用姿势估计数据为 3D 模型制作动画

    我正在尝试使用姿势估计坐标来对 Three js 中的装配模型进行动画处理 我正在使用的姿势估计技术提供了视频源中人物的实时 x y z 坐标 我正在尝试使用这些坐标相应地移动 3D 模型 我使用下面的代码 其中一些代码是我在相关问题的答案

  • glClipPlane - webGL 中有等效的吗？

    我有一个 3D 网格 是否有可能像这样呈现剖面图 剪辑 glClipPlane在OpenGL中 我正在使用 Three js r65 我添加的最新着色器是 片段着色器 uniform float time uniform vec2 reso

随机推荐

  • Clojure 中的块注释

    如何在 Clojure 中注释多行 其实 还有办法 comment 定义嘿 嘿 对我进行检查

  • 使用 DT（DataTables 按钮扩展）导出表格时保持格式

    我制作了一个闪亮的应用程序 有人上传文件 计算一些比率 并且可以使用阈值滑块来格式化这些比率 我用DT formatStyle为此 它工作得非常好 据我了解这个函数 它创建一个回调来处理条件格式 然后 我想使用按钮扩展导出数据DT 我想在导

  • 正则表达式在 if 语句中将字符串与空格匹配（使用引号？）

    我将如何进行如下所示的正则表达式匹配 但在 This 周围加上引号 就像在现实世界中 This 将是一个可以在其中包含空格的字符串 bin bash text This is just a test string if text This

  • 分布式事务：.NET Framework 与 .NET Core

    我有以下代码示例 static void Main string args TransactionManager DistributedTransactionStarted sender eventArgs gt Console Write

  • SSE 和 AVX MoveMask 的用途是什么

    问题 MoveMask 的目的或意图是什么 学习如何使用 x86 x86 64 汇编 SSE AVX 的最佳地点是哪里 我可以更有效地编写代码吗 提问原因 我有一个用 F for NET 编写的使用 SSE2 的函数 我使用 AVX2 写了

  • 仅检索 Java 类中声明的静态字段

    我有以下课程 public class Test public static int a 0 public int b 1 是否可以使用反射来仅获取静态字段的列表 我知道我可以获得所有字段的数组Test class getDeclaredF

  • Android Google 地图 v2 删除默认标记

    我在我的 Android 应用程序中实现了 Android Google Maps v2 没有任何问题 但是 地图包含一些我未包含的 默认标记 我的意思是 一些私人营业地点 是否可以从地图上删除这些标记 以便我只获得城市名称和街道名称 只需

  • 捕获 Camera2 预览帧返回空缓冲区

    我一直在开发一个简单的 Android 应用程序 旨在将流式相机帧从 Android Camera2 API 管道传递到我的算法 我已经制作了几个应用程序 忠实地使用 Android Camera1 API 执行此操作 但即使在检查 Goo

  • 设置证书验证位置时出错

    OS Ubuntu 16 01 PHP 7 0 根据一些谷歌搜索以及 StackOverflow 上问题的输入 我设置以下 Curl 选项 CURLOPT SSL VERIFYPEER gt true CURLOPT SSL VERIFYH

  • 在emacs中使用flymake和tramp远程运行pyflakes？

    我正在尝试使用 Flymake 来运行 pyflakes 如建议的那样here http www emacswiki org cgi bin wiki PythonMode toc9 这对于本地文件来说效果很好 并且几乎可以通过一些调整来处

  • Bootstrap网格系统-如何使两列高度相等？ [复制]

    这个问题在这里已经有答案了 如何在 Bootstrap 网格列中使两列具有相同的高度 item text padding 30px important Flex center display flex align items center

  • 获取文件的扩展名而不在路径中提供扩展名

    当您指定除扩展名之外的整个路径时 是否可以获得文件的扩展名 例如 C Users Administrator Pictures BlueHillsTest Thanks Directory GetFiles http msdn micros

  • Selenium 2 和 JUnit4：如何捕获异常屏幕截图？

    我只想在意外异常时捕获屏幕截图 Note This answer could be outdated The answer is based on Selenium 2 15 Using 测试观察者 http kentbeck github

  • 正则表达式匹配所有字母数字和某些特殊字符？

    我正在尝试让正则表达式工作 该正则表达式将允许所有字母数字字符 大写字母和非大写字母以及数字 但也允许空格 正斜杠 破折号 并加上 我已经开始了 但到目前为止还没有成功 如果你想允许only那些 你还需要使用锚点 and a zA Z0 9

  • 了解libuv/epoll/非阻塞网络IO

    我试图了解非阻塞网络 IO 是如何工作的Node js libuv 我已经发现了fileIO 是使用完成的libuv工作线程 因此 在后台线程中 不过很多地方都说networkIO 是使用系统调用以非阻塞方式完成的 例如epoll kque

  • 使用 Delphi 通过 LDAP 进行 Active Directory 身份验证，并使用 [email protected]

    正如您从下面的代码片段中看到的 我目前正在使用 adshlp 和 ActiveDs TLB 从当前登录的用户收集有关 AD 的信息 我有一个表格 允许用户输入他们的 AD 密码 并在允许访问系统之前验证其是否正确 这很好 我现在遇到的问题是

  • 相当于 WinRT 中的可编辑组合框？

    标准 桌面 Windows 组合框具有三种样式 简单 下拉和下拉列表 下拉菜单的工作方式类似于编辑控件和组合框 而下拉列表不允许编辑 我是否遗漏了某些内容 或者 Windows 8 商店应用程序中的 XAML ComboBox 控件仅支持下

  • Cypress 通过 console.log 和命令日志来输出

    是否可以重定向或捕获赛普拉斯浏览器日志和命令日志以输出 我读了一些 Cypress githubissues https github com cypress io cypress issues 448关于这个话题 但我不知道如何让它发挥作

  • 替换宏变量中的字符串？

    我有一个宏 我在其中传递一个参数并使用它根据输入的名称定义一个新变量 define DO X x char do x var x other things 问题是如果我传入一个结构变量 它就会崩溃 DO X some struct gt t

  • 如何从 cdn THREE.js 加载 GLTFLoader

    我在弄清楚如何让 GLTFLoader 在 THREE js 中工作时遇到一些问题 我不明白如何使用 CDN 站点来托管文件 我尝试过使用网络上示例的链接 但这并没有完成我的工作 我在另一篇文章中读到 GLTFLoader 文件必须与我正在

热门标签