verlet-js物理引擎

最新推荐文章于 2024-05-05 16:36:17 发布

lujianing2011

最新推荐文章于 2024-05-05 16:36:17 发布

阅读量1.2k

点赞数

分类专栏： verlet

本文链接：https://blog.csdn.net/lujianing2011/article/details/9035065

版权

verlet 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

verlet-js是一个使用JavaScript编写的物理引擎，支持粒子系统、距离约束、角度约束等，通过verlet-js，你可以在应用中实现一些非常酷的、具备物理特性的效果，比如碰撞、滚动、滑动或弹跳。

verlet-js的一些特性如下：

Simulation（模拟）：包含复合实体的根对象，用于在一个场景中驱动实体的所有物理特性和动画效果
Composites（复合实体）：用于场景内的高层次的对象（比如球、连接物、布料等等）
Particles（粒子系统）：空间中的粒子点，用于响应各种操作（重力、拖拽等）
约束：将粒子连接在一起，使它们能够互相交流，包括固定（将一个粒子固定到空间中的某个位置）、距离约束（通过一定的直线距离绑定2个粒子）、角度约束（通过一定角度绑定3个粒子）

实现一些物理特效很帅很拉风

相关源代码：https://github.com/subprotocol/verlet-js

其中里面有四个例子一些图形那个源代码最少自己看了下做了下注释还有很多不太清楚的地方希望可以留言进行交流

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Verlet Shapes</title>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen, projection" />

	<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/395/smzuug8z/vec2.js"></script>
	<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/395/smzuug8z/constraint.js"></script>
		<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/395/smzuug8z/verlet.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/395/smzuug8z/objects.js"></script>
	


</head>
<body>
	
	<canvas id="scratch" style="width: 800px; height: 500px;"></canvas>
	<script type="text/javascript">

	window.onload = function() {
	  //获得画布
		var canvas = document.getElementById("scratch");

		// canvas dimensions
		//获得画布的尺寸
		var width = parseInt(canvas.style.width);
		var height = parseInt(canvas.style.height);

		// retina	
		//根据设备屏幕尺寸进行长宽适配  0.75 1 1.5
		var dpr = window.devicePixelRatio || 1;
		canvas.width = width*dpr;
		canvas.height = height*dpr;
		canvas.getContext("2d").scale(dpr, dpr);

		// simulation
		//模拟特性  包含复合实体的根对象，用于在一个场景中驱动实体的所有物理特性和动画效果
		var sim = new VerletJS(width, height, canvas);
		//摩擦力
		sim.friction = 1;
		
		// entities
		//实体
		//线段  vect2 是坐标点
		var segment = sim.lineSegments([new Vec2(20,10), new Vec2(40,10), new Vec2(60,10), new Vec2(80,10), new Vec2(100,10)], 0.02);
		//pin 钉住 第0 4两个点 
		var pin = segment.pin(0);
		var pin = segment.pin(4);
		
		//（原点，大小，最外层点数，）
		var tire1 = sim.tire(new Vec2(200,50), 50, 30, 0.3, 0.9);
		var tire2 = sim.tire(new Vec2(400,50), 70, 7, 0.1, 0.2);
		var tire3 = sim.tire(new Vec2(600,50), 70, 3, 1, 1);

		// animation loop
		var loop = function() {
			sim.frame(16);
			sim.draw();
			requestAnimFrame(loop);
		};

		loop();
	};
	
	
	</script>

</body>
</html>

lujianing2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
verlet-js物理引擎

verlet-js是一个使用JavaScript编写的物理引擎，支持粒子系统、距离约束、角度约束等，通过verlet-js，你可以在应用中实现一些非常酷的、具备物理特性的效果，比如碰撞、滚动、滑动或弹跳。 verlet-js的一些特性如下： Simulation（模拟）：包含复合实体的根对象，用于在一个场景中驱动实体的所有物理特性和动画效果Composites（复合实体）：
复制链接

扫一扫

专栏目录