目录
准备工作
结论
首页 web前端 js教程 在 WebGL 中使用 Three.js 探索模型和动画

在 WebGL 中使用 Three.js 探索模型和动画

Sep 04, 2023 pm 03:25 PM

浏览器中的 3D 图形自推出以来一直是一个热门话题。但如果您要使用普通的旧式 WebGL 创建应用程序,则需要很长时间。这就是为什么出现了一些真正有用的库。 Three.js 是其中最受欢迎的之一,在本系列中,我将向您展示如何充分利用它为您的用户创建令人惊叹的 3D 体验。

我希望您在开始阅读本教程之前对 3D 空间有基本的了解,因为我不会解释坐标和向量等主题。


准备工作

像往常一样,我们将从您之前创建的代码开始。下载并解压我提供的资源,您就可以开始了。


第 1 步:关于在 Blender 中导出模型的说明

在我们开始编程部分之前,我将解释一些很多人都遇到问题的问题。当您在 Blender 中创建模型并希望将其导出为 Three.js 格式时,您应该记住以下几点:

  • 首先,删除父子关系。如果您离开,Three.js 导出器将不会导出任何动画(这也适用于骨架修改器)
  • 第二,对顶点进行分组。如果您希望骨骼移动任何顶点,则必须对它们进行分组,并用骨骼的名称来命名该组。
  • 第三,您只能有一个动画。 这听起来可能是一个大问题,但我稍后会解释解决方法。

此外,导出时您必须确保在导出器中选择了这些选项:SkinningBonesSkeletal Animation


第 2 步:导入模型

与 Three.js 中的几乎所有内容一样,导入模型非常简单。有一个特殊的类 THREE.JSONLoader 将为我们做所有事情。当然,它只加载 JSON 模型,但建议使用它们,所以我只会介绍这个加载器(其他加载器的工作方式几乎相同)。我们先初始化它:

var loader = new THREE.JSONLoader;
var animation;
登录后复制

无需参数。我们还需要定义一个动画变量,以便稍后访问它。现在我们可以加载模型了:

loader.load('./model.js', function (geometry, materials) {
	var skinnedMesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
	skinnedMesh.position.y = 50;
	skinnedMesh.scale.set(15, 15, 15);
	scene.add(skinnedMesh);
	
	animate(skinnedMesh);
});
登录后复制

load 方法接受两个参数:模型路径和回调函数。加载模型时将调用此函数(因此同时您可以向用户显示加载栏)。将使用两个参数调用回调函数:模型的几何形状及其材料(它们随模型一起导出)。在回调中,我们正在创建网格,但这次是 THREE.SkinnedMesh,它支持动画。

接下来,我们将模型向上移动 50 个单位,将其放在立方体的顶部,将其缩放 15 倍(因为我倾向于在 Blender 中创建小模型)并将其添加到场景中。接下来我们调用 animate 函数来设置并播放动画。


第3步:动画

现在我们设置动画。这是 animate 函数的源代码:

function animate(skinnedMesh) {
	var materials = skinnedMesh.material.materials;

	for (var k in materials) {
		materials[k].skinning = true;
	}

	THREE.AnimationHandler.add(skinnedMesh.geometry.animation);
	animation = new THREE.Animation(skinnedMesh, "ArmatureAction", THREE.AnimationHandler.CATMULLROM);
	animation.play();
}
登录后复制

首先,我们必须在模型的所有材质中启用蒙皮(动画)。接下来,我们必须将模型中的动画添加到 THREE.AnimationHandler 并创建 THREE.Animation 对象。参数按以下顺序排列:要设置动画的网格、模型中的动画名称和插值类型(当您拥有像人体这样的复杂模型,并且希望网格平滑弯曲时很有用)。最后,我们播放动画。

但是如果你现在打开浏览器,你会看到模型没有移动:

在 WebGL 中使用 Three.js 探索模型和动画

要解决此问题,我们必须在 render 函数中添加一行,位于 articleSystem 旋转下方:

if (animation) animation.update(delta);
登录后复制

这将更新动画的时间,因此 THREE.AnimationHandler 知道要渲染哪一帧。现在打开浏览器,您应该看到顶部的立方体向左和向右弯曲:

在 WebGL 中使用 Three.js 探索模型和动画


第 4 步:多个动画

是的,有一种解决方法仅适用于模型中的一个动画序列,但它需要您对其进行编辑。这个想法是将每个动画添加到一个序列中,然后,当该动画结束时,下一个动画开始。接下来,导出模型后,您需要更改动画代码。假设我们有一个从开始到第三秒的站立动画,以及从第三秒到结束的行走动画。然后在我们的 render 函数中,我们必须检查动画是哪一秒,如果到达当前序列的结束时间,则停止它并从头开始播放:

var currentSequence = 'standing';

function (render) {
...
	if (animation) animation.update(delta);
	if (currentSequence == 'standing') {
		if (animation.currentTime > 4) {
			animation.stop();
			animation.play(false, 0); // play the animation not looped, from 0s
		}
	} else if (currentSequence == 'walking') {
		if (animation.currentTime <= 4 || animation.currentTime > 8) {
			animation.stop();
			animation.play(false, 4); // play the animation not looped, from 4s
		}
	}
...
}
登录后复制

您必须记住从正确的时间开始不循环的动画。如果用户的帧速率确实很低,这当然会出现问题,因为增量会更高,并且 animation.currentTime 可能远高于任何特定序列的限制,导致播放下一个序列的某些部分。但只有当增量约为 300-500 毫秒时才会引人注目。

现在要更改 animate 函数来播放行走动画,只需将这些参数添加到 animation.play 函数即可:

animation.play(false, 0);
登录后复制

此外,让我们允许用户使用 a 键在动画之间切换。将此代码添加到文件末尾,就在 render() 调用之前:

document.addEventListener('keyup', function (e) {
	if (e.keyCode == 'A'.charCodeAt(0)) {
		currentSequence = (currentSequence == 'standing' ? 'walking': 'standing');
	}
});
登录后复制

第 5 步:附着到骨骼

这种技术在角色扮演游戏中特别有用,但它也可以应用于其他类型。它涉及将另一个对象附加到动画对象的骨骼上:衣服、武器等。

让我们首先修改 loader.load 回调。在 scene.add(skinnedMesh') 下添加此代码:

item = new THREE.Mesh(new THREE.CubeGeometry(100, 10, 10), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
item.position.x = 50;
pivot = new THREE.Object3D();
pivot.scale.set(0.15, 0.15, 0.15);
pivot.add(item);
pivot.useQuaternion = true;
skinnedMesh.add(pivot);
登录后复制

item 网格模拟您可能想要附加到动画对象的东西。为了使其围绕特定点而不是围绕中心旋转,我们将其添加到 pivot 对象并将其向右移动 50 个单位(宽度的一半)。我们必须将其缩放到 0.15,因为它将被添加到 skinnedMesh,其缩放比例为 15。最后,在将其添加到我们的动画对象之前,我们告诉它使用四元数。

基本上,四元数是一个数字系统,但由于 Three.js 为我们处理了所有事情,如果您不想,则不必深入研究这个主题(但如果您愿意,请查看其维基百科页)。它们用于旋​​转物体,而没有万向节锁定的风险。

现在,在 render 函数中,我们必须更新对象的位置和旋转:

pivot.position = new THREE.Vector3().getPositionFromMatrix(skinnedMesh.bones[2].skinMatrix);
pivot.quaternion.setFromRotationMatrix(skinnedMesh.bones[2].skinMatrix);
登录后复制

让我解释一下这里发生了什么。首先,我们将位置设置为与模型中最后一个骨骼的位置相同。我们使用 skinMatrix 属性来计算它。然后我们使用相同的属性来计算 pivot 旋转的四元数。之后,您可以打开浏览器,您应该看到红色光束附加到我们的模型上:

在 WebGL 中使用 Three.js 探索模型和动画


结论

我希望您从本教程中学到了一些新的有趣的技术。与往常一样,请随意尝试我们创建的应用程序。在本系列的下一个(也是最后一个)教程中,我将向您展示 OpenGL/WebGL 着色器的真正威力。

以上是在 WebGL 中使用 Three.js 探索模型和动画的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何创建和发布自己的JavaScript库? 如何创建和发布自己的JavaScript库? Mar 18, 2025 pm 03:12 PM

文章讨论了创建,发布和维护JavaScript库,专注于计划,开发,测试,文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能? 如何在浏览器中优化JavaScript代码以进行性能? Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略,重点是减少执行时间并最大程度地减少对页面负载速度的影响。

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

如何使用浏览器开发人员工具有效调试JavaScript代码? 如何使用浏览器开发人员工具有效调试JavaScript代码? Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试,专注于设置断点,使用控制台和分析性能。

如何有效地使用Java的收藏框架? 如何有效地使用Java的收藏框架? Mar 13, 2025 pm 12:28 PM

本文探讨了Java收藏框架的有效使用。 它强调根据数据结构,性能需求和线程安全选择适当的收集(列表,设置,地图,队列)。 通过高效优化收集用法

如何使用源地图调试缩小JavaScript代码? 如何使用源地图调试缩小JavaScript代码? Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图,设置断点以及使用Chrome DevTools和WebPack之类的工具。

开始使用Chart.js:PIE,DONUT和BUBBLE图表 开始使用Chart.js:PIE,DONUT和BUBBLE图表 Mar 15, 2025 am 09:19 AM

本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前,我们已学习了 Chart.js 的四种图表类型:折线图和条形图(教程二),以及雷达图和极地区域图(教程三)。 创建饼图和环形图 饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如,可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比,或不同候选人在选举中获得的投票百分比。 饼图仅适用于比较单个参数或数据集。需要注意的是,饼图无法绘制值为零的实体,因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

See all articles