// Create some local variables for convenience
var state = false, // `true` when the simulation is running
viewport = document.getElementById( 'viewport' ), // The canvas element we're going to use
// If your computer supports it, switch to the WebGLRenderer for a much smoother experience
// most of the lag and jittering you see in the simulation is from the CanvasRenderer, not the physics
renderer = new THREE.CanvasRenderer({ canvas: viewport }), // Create the renderer
//renderer = new THREE.WebGLRenderer({ canvas: viewport }), // Create the renderer
scene = new THREE.Scene, // Create the scene
camera = new THREE.PerspectiveCamera( 35, 1, 1, 1000 ),
ball_geometry = new THREE.SphereGeometry( 3 ), // Create the ball geometry with a radius of `3`
ball_material = new THREE.MeshLambertMaterial({ color: 0x0000ff, overdraw: true }), // Balls will be blue
large_ball_geometry = new THREE.SphereGeometry( 4 ), // Create the ball geometry with a radius of `4`
large_ball_material = new THREE.MeshLambertMaterial({ color: 0x00ff00, overdraw: true }), // Large balls are be green
time_last_run, // used to calculate simulation delta
world, // This will hold the jiglibjs objects
shape; // Will hold each physics shape as they're defined
renderer.setSize( viewport.clientWidth, viewport.clientHeight );
camera.position.set( -10, 30, -200 );
camera.lookAt( scene.position ); // Look at the center of the scene
scene.add( camera );
function addLights() {
var ambientLight = new THREE.AmbientLight( 0x555555 );
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( -.5, .5, -1.5 ).normalize();
scene.add( directionalLight );
}
function buildScene() {
// Create the physics world
world = jigLib.PhysicsSystem.getInstance();
//world.setGravity([ 0, 10, 0 ]);
var ramp_geometry= new THREE.CubeGeometry( 50, 2, 10 ),
material_red = new THREE.MeshLambertMaterial({ color: 0xdd0000, overdraw: true }),
material_green = new THREE.MeshLambertMaterial({ color: 0x00bb00, overdraw: true });
var ramp_1 = new THREE.Mesh( ramp_geometry, material_red );
scene.add( ramp_1 );
shape = new jigLib.JBox( null, 50, 10, 2 ); // "null" = skin, "50" = width, "10" = depth, "2" = height
shape.set_mass( 1 );
shape.set_movable( false ); // Static
shape.mesh = ramp_1;
// position the ramp
ramp_1.rotation.z = -Math.PI / 28;
shape.moveTo([ -20, 25, 0, 0 ]);
shape.set_rotationZ(shape.radiansToDegrees( ramp_1.rotation.z ));
world.addBody( shape );
var ramp_2 = new THREE.Mesh( ramp_geometry, material_red );
scene.add( ramp_2 );
shape = new jigLib.JBox( null, 50, 10, 2 ); // "null" = skin, "50" = width, "10" = depth, "2" = height
shape.set_mass( 50 );
shape.set_movable( false ); // Static
// position the ramp
shape.moveTo([ 25, 5, 0, 0 ]);
shape.set_rotationZ(shape.radiansToDegrees( -Math.PI / 16 ));
shape.mesh = ramp_2;
world.addBody( shape );
// Create the floor
var floor = new THREE.Mesh( new THREE.PlaneGeometry( 100, 50 ), material_red );
scene.add( floor );
floor.position.y = -15; // position the floor
shape = new jigLib.JBox( null, 100, 50, .01 ); // "null" = skin, "100" = width, "50" = depth, ".01" = small number to represent a plane
shape.set_mass( 1 );
shape.set_movable( false ); // Static
shape.moveTo([ 0, -15, 0, 0 ]);
world.addBody( shape );
}
function addBall() {
var ball;
if ( !state ) return;
if ( Math.random() >= .25 ) {
ball = new THREE.Mesh( ball_geometry, ball_material );
shape = new jigLib.JSphere( null, 3 ); // "null" = skin, "3" = radius
shape.set_mass( 5 );
} else {
ball = new THREE.Mesh( large_ball_geometry, large_ball_material );
shape = new jigLib.JSphere( null, 4 ); // "null" = skin, "4" = radius
shape.set_mass( 10 );
}
shape.set_rotVelocityDamping([ .95, .95, .95, 0 ]); // Set the rotational damping to a much more realistic value (`.95` matches the default linear damping)
scene.add( ball );
ball.position.set(
Math.random() * 40 - 20, // Random positon between -20 and 20
50,
0
);
shape.moveTo([ ball.position.x, ball.position.y, ball.position.z, 0 ]);
shape.mesh = ball;
world.addBody( shape );
}
function updateWorld() {
requestAnimationFrame( updateWorld );
if ( !state ) return;
var delta, now = (new Date()).getTime();
if ( time_last_run ) {
delta = ( now - time_last_run ) / 1000;
} else {
delta = 1 / 60;
}
time_last_run = now;
world.integrate( delta * 2 ); // double the speed of the simulation
// Update the scene objects
var bodies = world.get_bodies(), i, mesh, position, glmatrix, matrix;
matrix = new THREE.Matrix4;
for ( i = 0; i < bodies.length; i++ ) {
mesh = bodies[i].mesh;
if ( mesh ) {
position = bodies[i].get_position();
mesh.position.set(
position[0],
position[1],
position[2]
);
glmatrix = bodies[i].get_currentState().get_orientation().glmatrix;
matrix.set(
glmatrix[0],glmatrix[1],glmatrix[2],glmatrix[3],
glmatrix[4],glmatrix[5],glmatrix[6],glmatrix[7],
glmatrix[8],glmatrix[9],glmatrix[10],glmatrix[11],
glmatrix[12],glmatrix[13],glmatrix[14],glmatrix[15]
);
mesh.rotation.getRotationFromMatrix( matrix );
}
}
renderer.render( scene, camera );
}
addLights();
buildScene();
document.getElementById( 'startStop' ).addEventListener('click',
function() {
if ( this.innerHTML === 'Start' ) {
this.innerHTML = 'Stop';
time_last_run = (new Date()).getTime();
state = true;
} else {
this.innerHTML = 'Start';
state = false;
}
}
)
updateWorld();
setInterval( addBall, 500 );
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/jiglib.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/cof/jconfig.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/glmatrix.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/vector3dutil.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/matrix3d.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/jnumber3d.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/jmatrix3d.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/jmaths3d.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/data/contactdata.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/data/edgedata.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/data/planedata.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/data/spandata.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/plugins/iskin3d.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/geometry/jaabox.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/physics/bodypair.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/physics/cachedimpluse.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/physics/materialproperties.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/physics/physicscontroller.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/physics/physicsstate.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/physics/rigid_body.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/geometry/jbox.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/geometry/jcapsule.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/geometry/jplane.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/geometry/jray.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/geometry/jsegment.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/geometry/jsphere.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/geometry/jterrain.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/collpointinfo.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/collisioninfo.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectinfo.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectfunctor.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectboxbox.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectboxplane.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectboxterrain.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectcapsulebox.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectcapsulecapsule.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectcapsuleplane.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectcapsuleterrain.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectspherebox.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectspherecapsule.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectsphereplane.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectspheresphere.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/colldetectsphereterrain.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/collision/collisionsystem.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/physics/physicssystem.js"></script>
<button id="startStop">Start</button><br />
<canvas id="viewport" width="600" height="600"></canvas>
External resources loaded into this fiddle: