Verlet.js简介

2023-12-26 21:28| 来源: 网络整理| 查看: 265

verlet-js是由Sub Protocol创作的轻量级物理引擎，可在基于Web的游戏中使用。如果您热衷于科学和工程，也可以在模拟中使用它。顾名思义，verlet-js基于一种称为Verlet集成的迭代技术，用于计算对象在其二维世界中的行为。

在本教程中，我将教您所需的一切，以了解如何在项目中有效使用此物理引擎。

设定

首先，从GitHub下载最新版本的verlet-js，并使用script标签将其包含在您的网页中：

在canvas上绘制此物理引擎的2D世界时，您必须在网页上添加一个：

初始化2D世界

要初始化2D世界（也可以将其称为模拟），您必须调用称为VerletJS()的verlet-js构造函数。向此构造方法传递canvas的尺寸以及对canvas本身的引用：

var world; function initializeWorld() { world = new VerletJS(800, 300, document.getElementById("canvas")); } 渲染世界

要绘制2D世界，您必须重复调用执行所有物理计算的frame()函数和绘制所有属于2D世界的粒子和约束的draw()函数。您每秒调用这些功能的频率决定您世界的帧速率：

// The frame rate of the world var fps = 32; function renderWorld() { world.frame(16); world.draw(); setTimeout(renderWorld, 1000 / fps); } 激活世界

现在您已经具有初始化和渲染世界的功能，让我们添加在页面加载时调用它们的代码：

window.addEventListener("load", function() { initializeWorld(); renderWorld(); });

此时，如果您尝试在浏览器中一起运行这些代码片段，则canvas元素中将不会发生任何事情，因为您的世界没有任何东西。

向世界添加物品

用verlet-js创建的世界只能包含粒子。但是，您可以在粒子之间创建约束，以限制粒子彼此相对移动的方式。例如，使用距离约束，可以强制两个粒子之间始终保持固定的距离。同样，使用角度约束，可以强制三个粒子始终保持固定角度。

只需一点点创造力，您就可以使用粒子和约束来创建复杂的形状和行为。

形状

verlet-js具有一个名为tire()的辅助函数，使您可以快速创建简单的形状（由粒子和约束组成），而不必自己定义粒子或约束。要创建一个三角形，可以将以下代码添加到initializeWorld函数中：

world.tire(new Vec2(100,100), 100, 3, 1, 1);

第一个参数指定形状原点的坐标，而第二个参数指定半径（从原点到形状的所有其他点的距离）。第三个参数是组成形状的线段数。最后两个参数指定约束的刚度。

使用此语句，您将获得以下结果：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen GJvXwV 。

这是使用tire()的另一个示例，向您展示了如何创建正方形：

world.tire(new Vec2(100,100), 100, 4, 1, 1);

这是您获得的结果的实时演示：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen ZGJMVX 。

请记住，传递给tire()的第三个参数指定了构成形状的三角形线段的数量，而不是形状具有的边的数量。

线数

要创建由两个粒子组成的线段，可以使用lineSegments()函数。它接受一个Vec2对象数组，该数组包含形成线段的粒子的位置，以及一个数字，用于指定粒子之间的距离约束的刚度。

这是创建端点在（100,100）和（150,150）的线段的方法：

world.lineSegments([new Vec2(100,100), new Vec2(150,150)], 1);

前面的语句为您提供以下结果：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen xGLamJ 。

布料

verlet-js提供的另一个帮助器函数称为cloth() 。它使您可以创建一组行为类似于布的粒子和约束。以下代码显示了如何使用它：

world.cloth(new Vec2(100,100), 200, 200, 10, 3, 1);

此函数接受很多参数。以下列表描述了所有这些：

第一个参数指定原点的坐标第二个和第三个参数指定布料的宽度和高度。第四个参数指定布料每一行和每一列中的段数第五个参数（如果非零）指定应固定哪些粒子最后一个参数指定所有粒子之间约束的刚度

运行上一条语句的结果如下所示：

请参阅CodePen上的SitePoint（ @SitePoint ）的Pen PqKdVw 。

创建自定义形状

可以使用Composite类创建更复杂的形状（那些不能使用辅助函数创建的形状）。 Composite对象具有两个数组：一个包含粒子的数组（称为particles ，另一个包含约束的对象（ constraints 。要将粒子或约束添加到Composite对象，必须使用适当数组的push()函数。

以下代码显示了如何使用三个粒子和三个距离约束来创建三角形：

var triangle = new world.Composite(); triangle.particles.push(new Particle(new Vec2(100,100))); triangle.particles.push(new Particle(new Vec2(100,200))); triangle.particles.push(new Particle(new Vec2(200,100))); triangle.constraints.push( new DistanceConstraint(triangle.particles[0], triangle.particles[1],2) ); triangle.constraints.push( new DistanceConstraint(triangle.particles[0], triangle.particles[2],2) ); triangle.constraints.push(new DistanceConstraint( triangle.particles[1], triangle.particles[2],2) );

准备好形状后，使用以下代码将其添加到您的世界中：

world.composites.push(triangle);

如您所见，world对象具有一个称为composites的数组，该数组用于保存所有Composite对象。在下面，您可以看到通过本节描述的摘录获得的结果：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen WvEgPG 。

使用图钉

创建布料时，您已经看到固定销在起作用。顾名思义，是用别针将粒子固定到canvas 。这意味着固定的粒子将不受重力影响，因此，除非您拖动它，否则它将不会移动。

例如，以下代码固定组成刚创建的三角形的粒子之一：

// pins the first particle triangle.pin(0, new Vec2(100,100));

通过固定粒子，可以获得以下演示中所示的效果：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen MwvqLv 。

改变重力

默认情况下，您2D世界中的对象会向下掉落。但是，您可以通过更改gravity值（世界的属性）来更改此行为。例如，要更改世界，使重力向下和向右拉，可以将以下代码添加到initializeWorld函数中：

world.gravity = new Vec2(0.2, 0.2);

这样，您可以获得以下结果：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen xGLaMJ 。

结论

感谢这篇介绍性文章，现在您知道如何使用verlet-js。正如我们所说，它是一个轻量级的物理库，用于创建由粒子和约束组成的弹性和交互式2D世界。要了解更多信息，您可以在GitHub上阅读其代码和示例，或阅读Sub Protocol提供的指南。

您如何看待这个图书馆？你曾经用过吗？你创造了什么？让我们开始讨论。

From: https://www.sitepoint.com/an-introduction-to-verlet-js/

【本文地址】

公司简介

联系我们