Skip to content

Instantly share code, notes, and snippets.

@imzhi

imzhi/ContactMaterial.html

Last active August 29, 2015 14:14
Show Gist options
  • Save imzhi/3a66babfb93b889f0833 to your computer and use it in GitHub Desktop.
Save imzhi/3a66babfb93b889f0833 to your computer and use it in GitHub Desktop.
Download ZIP
P2.JS 学习备忘
Raw
ContactMaterial.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ContactMaterial</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
overflow: hidden;
width:100%;
height:100%;
}
</style>
<script src="../../library/p2.js"></script>
<script src="../../library/p2.renderer.js"></script>
</head>
<body>
<script>
function createWorld() {
return new p2.World({
gravity: [0, -10]
});
}
function createBox() {
var body = new p2.Body({
mass: 1,
position: [0, 4]
});
var shape = new p2.Rectangle(2, 2);
body.addShape(shape);
world.addBody(body);
return shape;
}
function createPlatform() {
var body = new p2.Body({
mass: 0,
position: [0, -2]
});
var shape = new p2.Rectangle(12e2, 0.5);
body.addShape(shape);
world.addBody(body);
return shape;
}
function addContactMaterial(boxShape, platformShape) {
boxShape.material = new p2.Material();
platformShape.material = new p2.Material();
var material = new p2.ContactMaterial(boxShape.material, platformShape.material, {
surfaceVelocity: -50,
restitution: 0.5,
friction: 0.3,
stiffness: 1e7
});
world.addContactMaterial(material);
}
var app = new p2.WebGLRenderer(function() {
var world = createWorld();
this.setWorld(world);
var boxShape = createBox();
var platformShape = createPlatform();
addContactMaterial(boxShape, platformShape);
this.frame(0, 0, 12, 12);
});
</script>
</body>
</html>
Raw
DistanceMaterial.html
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title>DistanceConstraint</title>
<style>
html,body{
margin:0;
padding:0;
overflow: hidden;
width:100%;
height:100%;
}
</style>
<script src="../../library/p2.js"></script>
<script src="../../library/p2.renderer.js"></script>
</head>
<body>
<script>
function createWorld() {
return new p2.World({gravity:[0, -10]});
}
function createLeftCircle() {
var body = new p2.Body({mass: 1, position: [-1, -4]});
var shape = new p2.Circle(1);
body.addShape(shape);
world.addBody(body);
return body;
}
function createRightCircle() {
var body = new p2.Body({mass: 1, position: [2, -4]});
var shape = new p2.Circle(1);
body.addShape(shape);
world.addBody(body);
return body;
}
function createPlane() {
//下
var body = new p2.Body({ mass: 0, position: [0, -5]});
var shape = new p2.Plane();
body.addShape(shape);
world.addBody(body);
//右
body = new p2.Body({ angle: Math.PI / 2, mass: 0, position: [10, 0]});
body.addShape(shape);
world.addBody(body);
//左
body = new p2.Body({ angle: -Math.PI / 2, mass: 0, position: [-10, 0]});
body.addShape(shape);
world.addBody(body);
}
function addDistanceConstraint(circle1, circle2) {
var constraint = new p2.DistanceConstraint(circle1, circle2, {
distance: 3,
localAnchorA: [0, 0],
localAnchorB: [0, 0],
maxForce: Math.MAX_VALUE
});
world.addConstraint(constraint);
constraint.collideConnected = true;
constraint.lowerLimitEnabled = true;
constraint.upperLimitEnabled = true;
constraint.lowerLimit = 2.5;
constraint.upperLimit = 4;
}
var app = new p2.WebGLRenderer(function() {
var world = createWorld();
this.setWorld(world);
var left_circle = createLeftCircle();
var right_circle = createRightCircle();
addDistanceConstraint(left_circle, right_circle);
createPlane();
this.frame(0, 0, 12, 12);
});
</script>
</body>
</html>
Raw
LinearSpring.html
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title>LinearSpring</title>
<style>
html,body{
margin:0;
padding:0;
overflow: hidden;
width:100%;
height:100%;
}
</style>
<script src="../../library/p2.js"></script>
<script src="../../library/p2.renderer.js"></script>
</head>
<body>
<script>
var world;
var circleBody, circleShape;
var radius = .5;
var groundBody, groundShape;
var width = 2, height = 1;
function createWorld() {
world = new p2.World({
gravity: [0, -10]
});
}
function createCircle(){
circleBody = new p2.Body({
mass: 1,
position: [0, 2.5]
});
circleShape = new p2.Circle(radius);
circleBody.addShape(circleShape);
world.addBody(circleBody);
}
function createGround() {
groundBody = new p2.Body({
mass: 0,
position: [0, 0]
});
groundShape = new p2.Plane();
groundBody.addShape(groundShape);
world.addBody(groundBody);
}
function createHolder() {
holderBody = new p2.Body({
mass: 0,
position: [0, 4]
});
holderShape = new p2.Rectangle(width, height);
holderBody.addShape(holderShape);
world.addBody(holderBody);
}
function createSpring() {
var s1 = new p2.LinearSpring(holderBody, circleBody, {
// 这几个属性的赋值都和它们的缺省值一样
localAnchorA: [0, 0],
localAnchorB: [0, 0],
stiffness: 100,
damping: 0,
restLength: 1.5
});
world.addSpring(s1);
}
var app = new p2.WebGLRenderer(function() {
createWorld();
this.setWorld(world);
createCircle();
createHolder();
createGround();
createSpring();
this.frame(0, 2, 10, 10);
});
</script>
</body>
</html>
Raw
LockConstraint.html
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title>LockConstraint</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
overflow: hidden;
width:100%;
height:100%;
}
</style>
<script src="../../library/p2.js"></script>
<script src="../../library/p2.renderer.js"></script>
</head>
<body>
<script>
function createWorld() {
return new p2.World({gravity: [0, -10]});
}
function createBox1() {
var body = new p2.Body({mass:1, position:[-2, -4]});
var shape = new p2.Rectangle(2, 2);
// var shape = new p2.Circle(1);
body.addShape(shape);
world.addBody(body);
return body;
}
function createBox2() {
var body = new p2.Body({mass:0.01, position:[2, -4]});
var shape = new p2.Rectangle(2, 2);
// var shape = new p2.Circle(1);
body.addShape(shape);
world.addBody(body);
return body;
}
function createPlane() {
var body = new p2.Body({mass:0, position:[0, -5]});
var shape = new p2.Plane();
body.addShape(shape);
world.addBody(body);
}
function addLockConstraint(bodyA, bodyB) {
var constraint = new p2.LockConstraint(bodyA, bodyB, {
localOffsetB: [3, 1],
localAngleB: Math.PI / 4,
maxForce: Math.MAX_VALUE
});
world.addConstraint(constraint);
constraint.collideConnected = false;
}
var app = new p2.WebGLRenderer(function() {
var world = createWorld();
this.setWorld(world);
var box1 = createBox1();
var box2 = createBox2();
createPlane();
addLockConstraint(box1, box2);
this.frame(0, 0, 12, 12);
});
</script>
</body>
</html>
Raw
PrismaticConstraint.html
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title>PrismaticConstraint</title>
<style>
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
</style>
<script src="../../library/p2.js"></script>
<script src="../../library/p2.renderer.js"></script>
</head>
<body>
<script type="text/javascript">
var world;
var circleBody, circleShape;
var radius = 1;
var groundBody, groundShape;
var width = 2, height = 1;
function createWorld() {
world = new p2.World({
gravity: [0, -10]
});
}
function createCircle(){
circleBody = new p2.Body({
mass: 1,
position: [0, 2]
});
circleShape = new p2.Circle(radius);
circleBody.addShape(circleShape);
world.addBody(circleBody);
}
function createGround() {
groundBody = new p2.Body({
mass: 0,
position: [0, 0]
});
groundShape = new p2.Plane();
groundBody.addShape(groundShape);
world.addBody(groundBody);
}
function createHolder() {
holderBody = new p2.Body({
mass: 0,
position: [0, 4]
});
holderShape = new p2.Rectangle(width, height);
holderBody.addShape(holderShape);
world.addBody(holderBody);
}
function createPrismaticConstraint() {
var p1 = new p2.PrismaticConstraint(holderBody, circleBody, {
localAnchorA: [1, -0.5],
localAnchorB: [0, 0],
localAxisA: [1, 0],
disableRotationalLock: false
});
p1.setLimits(0, 0);
world.addConstraint(p1);
}
var app = new p2.WebGLRenderer(function() {
createWorld();
this.setWorld(world);
createCircle();
createHolder();
createGround();
createPrismaticConstraint();
this.frame(0, 2, 10, 10);
});
</script>
</body>
</html>
Raw
RevoluteConstraint.html
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<title>RevoluteConstraint</title>
<style>
html,body{
margin:0;
padding:0;
overflow: hidden;
width:100%;
height:100%;
}
</style>
<script src="../../library/p2.js"></script>
<script src="../../library/p2.renderer.js"></script>
</head>
<body>
<script>
var world;
var circleBody, circleShape;
var radius = 1;
var groundBody, groundShape;
var width = 2, height = 1;
function createWorld() {
world = new p2.World({
gravity: [0, -10]
});
}
function createCircle(){
circleBody = new p2.Body({
mass: 1,
position: [0, 2]
});
circleShape = new p2.Circle(radius);
circleBody.addShape(circleShape);
world.addBody(circleBody);
}
function createGround() {
groundBody = new p2.Body({
mass: 0,
position: [0, 0]
});
groundShape = new p2.Plane();
groundBody.addShape(groundShape);
world.addBody(groundBody);
}
function createHolder() {
holderBody = new p2.Body({
mass: 0,
position: [0, 4]
});
holderShape = new p2.Rectangle(width, height);
holderBody.addShape(holderShape);
world.addBody(holderBody);
}
function createRevoluteConstraint() {
var r1 = new p2.RevoluteConstraint(holderBody, circleBody, {
// worldPivot: [0, 5]
localPivotA: [1, -1],
localPivotB: [0, 0]
});
r1.enableMotor();
r1.setMotorSpeed(5);
world.addConstraint(r1);
}
var app = new p2.WebGLRenderer(function() {
createWorld();
this.setWorld(world);
createCircle();
createHolder();
createGround();
createRevoluteConstraint();
this.frame(0, 2, 10, 10);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment