您的位置：首页 > Web前端 > JavaScript

verlet-js物理引擎

2013-06-05 23:26 417 查看


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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航