Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

498 lines (369 sloc) 18.256 kB
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>JigLibJS2 Javascript Vehicle Physics</title>
<meta charset="utf-8">
<style type="text/css">
body {
background:#fff;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
</style>
<script type="text/javascript" src="Three.js"></script>
<script type="text/javascript" src="RequestAnimationFrame.js"></script>
<script type="text/javascript" src="THREEx.jigliber.js"></script>
<!-- TODO put all those library into a single js -->
<script type="text/javascript" src="./geom/glMatrix.js"></script>
<script type="text/javascript" src="./jiglibjs2/jiglib.js"></script>
<script type="text/javascript" src="./geom/Vector3D.js"></script>
<script type="text/javascript" src="./geom/Matrix3D.js"></script>
<script type="text/javascript" src="./jiglibjs2/math/JMatrix3D.js"></script>
<script type="text/javascript" src="./jiglibjs2/math/JMath3D.js"></script>
<script type="text/javascript" src="./jiglibjs2/math/JNumber3D.js"></script>
<script type="text/javascript" src="./jiglibjs2/cof/JConfig.js"></script>
<script type="text/javascript" src="./jiglibjs2/data/CollOutData.js"></script>
<script type="text/javascript" src="./jiglibjs2/data/ContactData.js"></script>
<script type="text/javascript" src="./jiglibjs2/data/PlaneData.js"></script>
<script type="text/javascript" src="./jiglibjs2/data/EdgeData.js"></script>
<script type="text/javascript" src="./jiglibjs2/data/TerrainData.js"></script>
<script type="text/javascript" src="./jiglibjs2/data/OctreeCell.js"></script>
<script type="text/javascript" src="./jiglibjs2/data/CollOutBodyData.js"></script>
<script type="text/javascript" src="./jiglibjs2/data/TriangleVertexIndices.js"></script>
<script type="text/javascript" src="./jiglibjs2/data/SpanData.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/constraint/JConstraint.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/constraint/JConstraintMaxDistance.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/constraint/JConstraintWorldPoint.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/constraint/JConstraintPoint.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/MaterialProperties.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollPointInfo.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollisionInfo.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectInfo.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectFunctor.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectBoxTerrain.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectSphereMesh.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectCapsuleBox.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectSphereCapsule.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectCapsuleTerrain.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectSphereBox.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectSphereTerrain.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectBoxBox.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectBoxMesh.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectBoxPlane.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectCapsuleCapsule.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectSphereSphere.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectSpherePlane.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollDetectCapsulePlane.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollisionSystemAbstract.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollisionSystemGridEntry.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollisionSystemGrid.js"></script>
<script type="text/javascript" src="./jiglibjs2/collision/CollisionSystemBrute.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JIndexedTriangle.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JOctree.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JRay.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JAABox.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JTriangle.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JSegment.js"></script>
<script type="text/javascript" src="./jiglibjs2/events/JCollisionEvent.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/constraint/JConstraint.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/constraint/JConstraintMaxDistance.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/constraint/JConstraintWorldPoint.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/constraint/JConstraintPoint.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/PhysicsController.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/CachedImpulse.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/HingeJoint.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/BodyPair.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/PhysicsState.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/PhysicsSystem.js"></script>
<script type="text/javascript" src="./jiglibjs2/physics/RigidBody.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JSphere.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JTriangleMesh.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JPlane.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JTerrain.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JBox.js"></script>
<script type="text/javascript" src="./jiglibjs2/geometry/JCapsule.js"></script>
<script type="text/javascript" src="./jiglibjs2/debug/Stats.js"></script>
<script type="text/javascript" src="./jiglibjs2/vehicles/JChassis.js"></script>
<script type="text/javascript" src="./jiglibjs2/vehicles/JWheel.js"></script>
<script type="text/javascript" src="./jiglibjs2/vehicles/JCar.js"></script>
</head>
<body>
<script type="text/javascript">
var container, stats;
var camera, scene, renderer;
var projector;
var material;
var geometry, group;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
var bootTime = new Date().getTime();
var system;
var jigliber;
var JChassis;
var JWheel;
init_jiglib();
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
projector = new THREE.Projector();
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 70;
//camera.position.x = 50;
camera.position.y = 50;
scene = new THREE.Scene();
material = new THREE.MeshNormalMaterial();
//var ground = new THREE.Mesh( new Cube( 40, 0, 40 ), material );
//ground.position.x = 0;
//ground.position.y = -10;
//ground.position.z = 0;
//scene.addObject( ground );
var addCube = function(x, y, z, width, height, depth){
var geometry = new THREE.CubeGeometry( width, height, depth );
var mesh = new THREE.Mesh( geometry, material );
mesh.matrixAutoUpdate = false;
mesh.overdraw = true;
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
scene.addObject( mesh );
jigliber.addMesh(mesh);
return mesh;
}
var addSphere = function(radius){
var geometry = new THREE.SphereGeometry( radius, 30, 30 );
var mesh = new THREE.Mesh( geometry, material );
mesh.matrixAutoUpdate = false;
//mesh.overdraw = true;
mesh.position.x = Math.random() * 10 - 5;
mesh.position.y = 6 + 6 * i;
mesh.position.z = Math.random() * 10 - 5;
scene.addObject( mesh );
jigliber.addMesh(mesh);
return mesh;
}
for ( var i = 0; i < 10; i ++ ) {
if (Math.random() > .5 && false ) {
var width = Math.random() * 4;
var height = Math.random() * 4;
var depth = Math.random() * 4;
var x = Math.random() * 10 - 5;
var y = 6 + 6 * i;
var z = Math.random() * 10 - 5;
addCube(x, y, z, width, height, depth);
} else {
var mesh = addSphere( 2 );
}
}
var planeW = 150;
var planeD = 75;
var planeY = -10;
var tileW = 5;
var plane = new THREE.Mesh(
new THREE.PlaneGeometry( planeW, planeD, planeW/tileW, planeD/tileW ),
new THREE.MeshBasicMaterial( { color: 0x555555, wireframe: true } )
);
plane.rotation.x = - 90 * Math.PI / 180;
plane.position.y = planeY;
scene.addObject( plane );
if( false ){
jigliber.addMesh(plane);
plane.rigidBody.set_movable(false);
}else{
var body = new jiglib.JPlane();
body.set_y(-10);
body.set_rotationX(90);
body.set_movable(false);
system.addBody( body );
}
var mesh = addCube(0, planeY+tileW/2, +(planeD/2 - tileW/2), planeW, tileW, tileW);
mesh.rigidBody.set_movable(false);
var mesh = addCube(0, planeY+tileW/2, -(planeD/2 - tileW/2), planeW, tileW, tileW);
mesh.rigidBody.set_movable(false);
var mesh = addCube( +(planeW/2 - tileW/2), planeY+tileW/2, 0, tileW, tileW, planeD - 2*tileW);
mesh.rigidBody.set_movable(false);
var mesh = addCube( -(planeW/2 - tileW/2), planeY+tileW/2, 0, tileW, tileW, planeD - 2*tileW);
mesh.rigidBody.set_movable(false);
var width = 4;
var height = 1;
var depth = 8;
var mesh = new THREE.Mesh( new THREE.CubeGeometry( width, height, depth ), material );
mesh.matrixAutoUpdate = false;
mesh.overdraw = true;
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
var numSegs = 10;
var topRad = 1;
var botRad = 1;
var height = 1;
var topOffset = 0;
var botOffset = 0;
mesh.wheelFL = new THREE.Object3D();
mesh.wheelFR = new THREE.Object3D();
mesh.wheelBL = new THREE.Object3D();
mesh.wheelBR = new THREE.Object3D();
mesh.wheelFL.position.x = -2.2; mesh.wheelFL.position.y = -0.5; mesh.wheelFL.position.z = 4;
mesh.wheelFR.position.x = 2.2; mesh.wheelFR.position.y = -0.5; mesh.wheelFR.position.z = 4;
mesh.wheelBL.position.x = -2.2; mesh.wheelBL.position.y = -0.5; mesh.wheelBL.position.z = -4;
mesh.wheelBR.position.x = 2.2; mesh.wheelBR.position.y = -0.5; mesh.wheelBR.position.z = -4;
mesh.wheelFL.addChild(new THREE.Mesh( new THREE.CylinderGeometry( numSegs, topRad, botRad, height, topOffset, botOffset ), material ));
mesh.wheelFR.addChild(new THREE.Mesh( new THREE.CylinderGeometry( numSegs, topRad, botRad, height, topOffset, botOffset ), material ));
mesh.wheelBL.addChild(new THREE.Mesh( new THREE.CylinderGeometry( numSegs, topRad, botRad, height, topOffset, botOffset ), material ));
mesh.wheelBR.addChild(new THREE.Mesh( new THREE.CylinderGeometry( numSegs, topRad, botRad, height, topOffset, botOffset ), material ));
mesh.wheelFL.children[0].rotation.y = degToRad(90);
mesh.wheelFR.children[0].rotation.y = degToRad(90);
mesh.wheelBL.children[0].rotation.y = degToRad(90);
mesh.wheelBR.children[0].rotation.y = degToRad(90);
mesh.addChild( mesh.wheelFL );
mesh.addChild( mesh.wheelFR );
mesh.addChild( mesh.wheelBL );
mesh.addChild( mesh.wheelBR );
scene.addObject( mesh );
var carBody = new jiglib.JCar(null);
var maxSteerAngle = 50;
var steerRate = 3;
var driveTorque = 300;
carBody.setCar(maxSteerAngle, steerRate, driveTorque);
carBody.get_chassis().set_sideLengths(new Vector3D(width, height, depth, 0));
carBody.get_chassis().moveTo(new Vector3D(0, -0.8, -20));
carBody.get_chassis().set_mass(20);
system.addBody(carBody.get_chassis());
mesh.carBody = carBody;
mesh.rigidBody = carBody.get_chassis();
var wheelRadius = 1;
var travel = 1;
var sideFriction = 1.2; //1.2;
var fwdFriction = 1.2; // 1.2;
var restingFrac = 0.3; // 0.6; // 0.5;
var dampingFrac = 0.3; // 0.6;
var rays = 2;
carBody.setupWheel(0, new Vector3D(-2.2, -1, 4), sideFriction, fwdFriction, travel, wheelRadius, restingFrac, dampingFrac, rays, false);
carBody.setupWheel(1, new Vector3D( 2.2, -1, 4), sideFriction, fwdFriction, travel, wheelRadius, restingFrac, dampingFrac, rays, false);
carBody.setupWheel(2, new Vector3D(-2.2, -1, -4), sideFriction, fwdFriction, travel, wheelRadius, restingFrac, dampingFrac, rays, true);
carBody.setupWheel(3, new Vector3D( 2.2, -1, -4), sideFriction, fwdFriction, travel, wheelRadius, restingFrac, dampingFrac, rays, true);
carBody.wheelFL = carBody.get_wheels()[0];
carBody.wheelFR = carBody.get_wheels()[1];
carBody.wheelBL = carBody.get_wheels()[2];
carBody.wheelBR = carBody.get_wheels()[3];
document.onkeydown = function( e ){
switch(e.keyCode)
{
case 32:
carBody.setHBrake(1);
return false;
case 38:
carBody.setAccelerate(1);
return false;
case 40:
carBody.setAccelerate(-1);
return false;
case 37:
carBody.setSteer([0, 1], 1);
return false;
case 39:
carBody.setSteer([0, 1], -1);
return false;
}
}
document.onkeyup = function( e ){
switch(e.keyCode)
{
case 32:
carBody.setHBrake(0);
return false;
case 38:
carBody.setAccelerate(0);
return false;
case 40:
carBody.setAccelerate(0);
return false;
case 37:
carBody.setSteer([0, 1], 0);
return false;
case 39:
carBody.setSteer([0, 1], 0);
return false;
}
}
renderer = new THREE.WebGLRenderer();
// renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function init_jiglib() {
jigliber = new THREEx.jigliber();
system = jigliber.system();
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * .1;
mouseY = ( event.clientY - windowHalfY ) * .1;
}
function animate() {
requestAnimationFrame( animate );
updateDynamicsWorld();
render();
}
function degToRad(deg) {
return (deg*Math.PI)/180;
}
function radToDeg(rad) {
return rad*(180/Math.PI);
}
function updateDynamicsWorld() {
var present = new Date().getTime();
var deltaTime = present - bootTime;
bootTime = present;
//system.integrate( deltaTime / 1000 );
jigliber.update();
for ( var i = 0, l = scene.objects.length; i < l; i ++ ) {
var mesh = scene.objects[i];
if (mesh.carBody) {
mesh.wheelFL.position.y = mesh.carBody.wheelFL.getActualPos().y;
mesh.wheelFR.position.y = mesh.carBody.wheelFR.getActualPos().y;
mesh.wheelBL.position.y = mesh.carBody.wheelBL.getActualPos().y;
mesh.wheelBR.position.y = mesh.carBody.wheelBR.getActualPos().y;
mesh.wheelFL.rotation.y = degToRad(mesh.carBody.wheelFL.getSteerAngle());
mesh.wheelFR.rotation.y = degToRad(mesh.carBody.wheelFR.getSteerAngle());
mesh.wheelBL.rotation.y = degToRad(mesh.carBody.wheelBL.getSteerAngle());
mesh.wheelBR.rotation.y = degToRad(mesh.carBody.wheelBR.getSteerAngle());
mesh.wheelFL.children[0].rotation.x = degToRad(mesh.carBody.wheelFL.getAxisAngle());
mesh.wheelFR.children[0].rotation.x = degToRad(mesh.carBody.wheelFR.getAxisAngle());
mesh.wheelBL.children[0].rotation.x = degToRad(mesh.carBody.wheelBL.getAxisAngle());
mesh.wheelBR.children[0].rotation.x = degToRad(mesh.carBody.wheelBR.getAxisAngle());
var dir = mesh.carBody.get_chassis().get_currentState().orientation.get_rawData();
var rotate = new THREE.Matrix4(dir[0], dir[1], dir[2], dir[3], dir[4], dir[5], dir[6], dir[7], dir[8], dir[9], dir[10], dir[11], dir[12], dir[13], dir[14], dir[15]);
// test4.matrix.multiplySelf(rotate);
mesh.update(false, true, camera);
}
// camera.lookAt(mesh.position);
}
}
function render() {
//camera.position.x += ( mouseX - camera.position.x ) * .05;
//camera.position.y += ( - mouseY - camera.position.y ) * .05;
renderer.render( scene, camera );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectScene( scene );
if ( intersects.length > 0 ) {
var object = intersects[ 0 ].object;
if ( object.rigidBody ) {
object.rigidBody.setLineVelocity( new Vector3D( 0, 20, 0 ), false );
}
}
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.