A 3D vehicle derby video game rendered in three.js and run on a physi.js physics engine. UV maps designed in Adobe Illustrator; meshes created in Blender and imported as glTF.
Also wrote a tutorial on implementing complex 3D shapes like these, check it out. :)
A Pen by Matthew Main on CodePen.
| <!------- TRANSITION PAGES -------> | |
| <div id="landing_page_div" class="display_page"> | |
| <div id="landing_logo_div"> | |
| <img id="logo_landing" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_derby_logo.svg"> | |
| <img id="button_play" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_button_play.svg"> | |
| </div> | |
| <!-- AD --> | |
| <div id="ad_div"> | |
| <a href="https://codepen.io/matthewmain/full/MxwBmo" target="_blank"> | |
| <img id="ad_svg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/kts_ad.svg"> | |
| </a> | |
| </div> | |
| <style> | |
| #ad_div { | |
| position: fixed; | |
| width: 15%; | |
| bottom: 1.5%; | |
| right: 1.5%; | |
| } | |
| #ad_svg { | |
| width: 100%; | |
| } | |
| </style> | |
| </div> | |
| <!-- animated loader page --> | |
| <div id="loading_animation_page" class="display_page"> | |
| <div id="loading_animation_div"> | |
| <svg id="loading_animation_svg" viewBox="0 0 100 100"> | |
| <line class="loading_animation_lines" id="loading_animation_line_1" x1=5% y1=45% x2=95% y2=45% /> | |
| <line class="loading_animation_lines" id="loading_animation_line_2" x1=5% y1=50% x2=95% y2=50% /> | |
| <line class="loading_animation_lines" id="loading_animation_line_3" x1=19% y1=55% x2=81% y2=55% /> | |
| </svg> | |
| <img id="loading_animation_insignia" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_insignia.svg"> | |
| </div> | |
| </div> | |
| <!-- round win announcement page --> | |
| <div id="round_win_page_div" class="display_page announcement_page"> | |
| <div id="round_win_card_div" class="card_div"> | |
| <img id="round_win_card" class="card" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_round_win_card_gretchen.svg"> | |
| <img id="round_score_green" class="round_score green_score" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_1of3_green.svg"> | |
| <img id="round_score_red" class="round_score red_score" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_0of3_red.svg"> | |
| <img id="button_play_next_round" class="card_button" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_button_play_next_round.svg"> | |
| </div> | |
| </div> | |
| <!-- round draw announcement page --> | |
| <div id="round_draw_page_div" class="display_page announcement_page"> | |
| <div id="round_draw_card_div" class="card_div"> | |
| <img id="round_draw_card" class="card" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_round_draw_card.svg"> | |
| <img id="button_replay_round" class="card_button" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_button_replay_round.svg"> | |
| </div> | |
| </div> | |
| <!-- game win announcement pages --> | |
| <div id="game_win_gretchen_page_div" class="display_page announcement_page"> | |
| <div id="game_win_gretchen_card_div" class="card_div"> | |
| <img id="game_win_gretchen_card" class="card" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_game_win_card_gretchen.svg"> | |
| <img class="card_button button_new_game" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_button_new_game.svg"> | |
| </div> | |
| </div> | |
| <div id="game_win_bertha_page_div" class="display_page announcement_page"> | |
| <div id="game_win_bertha_card_div" class="card_div"> | |
| <img id="game_win_bertha_card" class="card" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_game_win_card_bertha.svg"> | |
| <img class="card_button button_new_game" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_button_new_game.svg"> | |
| </div> | |
| </div> | |
| <!------- UI -------> | |
| <!-- logo --> | |
| <div id="logo_div"> | |
| <img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_derby_logo.svg"> | |
| <a href="https://matthewma.in" target="_blank"><img id="copyright" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_copyright.svg"></a> | |
| </div> | |
| <!-- scoreboard --> | |
| <div id="scoreboard_div"> | |
| <img id="scoreboard_img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_scoreboard.svg"> | |
| <img id="board_score_green" class="board_score green_score" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_0of3_green.svg"> | |
| <img id="board_score_red" class="board_score red_score" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_0of3_red.svg"> | |
| </div> | |
| <!-- buttons --> | |
| <div id="buttons_div"> | |
| <img id="button_restart" class="buttons_items button_restart" title="restart the game" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_button_restart.svg"> | |
| <img class="buttons_items button_divider" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_button_divider.svg"> | |
| <img id="button_draw" class="buttons_items button_draw" title="declare match a draw" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_button_draw.svg"> | |
| </div> | |
| <!-- nav --> | |
| <img class="nav left_nav" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_nav_left.svg"> | |
| <img class="nav right_nav" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_nav_right.svg"> | |
| <!------- LIBRARIES -------> | |
| <!-- jQuery source --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <!-- three.js source --> | |
| <script src='https://threejs.org/build/three.min.js'></script> | |
| <!-- GLTFLoader.js source --> | |
| <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script> | |
| <!-- physi.js source --> | |
| <script src='https://chandlerprall.github.io/Physijs/physi.js'></script> | |
| <!-- full physijs_worker.js contents in a script (needed so worker can be used in codepen) --> | |
| <script id="physijs_worker" type="javascript/worker"> | |
| var transferableMessage = self.webkitPostMessage || self.postMessage, | |
| // enum | |
| MESSAGE_TYPES = { | |
| WORLDREPORT: 0, | |
| COLLISIONREPORT: 1, | |
| VEHICLEREPORT: 2, | |
| CONSTRAINTREPORT: 3 | |
| }, | |
| // temp variables | |
| _object, | |
| _vector, | |
| _transform, | |
| // functions | |
| public_functions = {}, | |
| getShapeFromCache, | |
| setShapeCache, | |
| createShape, | |
| reportWorld, | |
| reportVehicles, | |
| reportCollisions, | |
| reportConstraints, | |
| // world variables | |
| fixedTimeStep, // used when calling stepSimulation | |
| rateLimit, // sets whether or not to sync the simulation rate with fixedTimeStep | |
| last_simulation_time, | |
| last_simulation_duration = 0, | |
| world, | |
| transform, | |
| _vec3_1, | |
| _vec3_2, | |
| _vec3_3, | |
| _quat, | |
| // private cache | |
| _objects = {}, | |
| _vehicles = {}, | |
| _constraints = {}, | |
| _materials = {}, | |
| _objects_ammo = {}, | |
| _num_objects = 0, | |
| _num_wheels = 0, | |
| _num_constraints = 0, | |
| _object_shapes = {}, | |
| // The following objects are to track objects that ammo.js doesn't clean | |
| // up. All are cleaned up when they're corresponding body is destroyed. | |
| // Unfortunately, it's very difficult to get at these objects from the | |
| // body, so we have to track them ourselves. | |
| _motion_states = {}, | |
| // Don't need to worry about it for cached shapes. | |
| _noncached_shapes = {}, | |
| // A body with a compound shape always has a regular shape as well, so we | |
| // have track them separately. | |
| _compound_shapes = {}, | |
| // object reporting | |
| REPORT_CHUNKSIZE, // report array is increased in increments of this chunk size | |
| WORLDREPORT_ITEMSIZE = 14, // how many float values each reported item needs | |
| worldreport, | |
| COLLISIONREPORT_ITEMSIZE = 5, // one float for each object id, and a Vec3 contact normal | |
| collisionreport, | |
| VEHICLEREPORT_ITEMSIZE = 9, // vehicle id, wheel index, 3 for position, 4 for rotation | |
| vehiclereport, | |
| CONSTRAINTREPORT_ITEMSIZE = 6, // constraint id, offset object, offset, applied impulse | |
| constraintreport; | |
| var ab = new ArrayBuffer( 1 ); | |
| transferableMessage( ab, [ab] ); | |
| var SUPPORT_TRANSFERABLE = ( ab.byteLength === 0 ); | |
| getShapeFromCache = function ( cache_key ) { | |
| if ( _object_shapes[ cache_key ] !== undefined ) { | |
| return _object_shapes[ cache_key ]; | |
| } | |
| return null; | |
| }; | |
| setShapeCache = function ( cache_key, shape ) { | |
| _object_shapes[ cache_key ] = shape; | |
| } | |
| createShape = function( description ) { | |
| var cache_key, shape; | |
| _transform.setIdentity(); | |
| switch ( description.type ) { | |
| case 'plane': | |
| cache_key = 'plane_' + description.normal.x + '_' + description.normal.y + '_' + description.normal.z; | |
| if ( ( shape = getShapeFromCache( cache_key ) ) === null ) { | |
| _vec3_1.setX(description.normal.x); | |
| _vec3_1.setY(description.normal.y); | |
| _vec3_1.setZ(description.normal.z); | |
| shape = new Ammo.btStaticPlaneShape(_vec3_1, 0 ); | |
| setShapeCache( cache_key, shape ); | |
| } | |
| break; | |
| case 'box': | |
| cache_key = 'box_' + description.width + '_' + description.height + '_' + description.depth; | |
| if ( ( shape = getShapeFromCache( cache_key ) ) === null ) { | |
| _vec3_1.setX(description.width / 2); | |
| _vec3_1.setY(description.height / 2); | |
| _vec3_1.setZ(description.depth / 2); | |
| shape = new Ammo.btBoxShape(_vec3_1); | |
| setShapeCache( cache_key, shape ); | |
| } | |
| break; | |
| case 'sphere': | |
| cache_key = 'sphere_' + description.radius; | |
| if ( ( shape = getShapeFromCache( cache_key ) ) === null ) { | |
| shape = new Ammo.btSphereShape( description.radius ); | |
| setShapeCache( cache_key, shape ); | |
| } | |
| break; | |
| case 'cylinder': | |
| cache_key = 'cylinder_' + description.width + '_' + description.height + '_' + description.depth; | |
| if ( ( shape = getShapeFromCache( cache_key ) ) === null ) { | |
| _vec3_1.setX(description.width / 2); | |
| _vec3_1.setY(description.height / 2); | |
| _vec3_1.setZ(description.depth / 2); | |
| shape = new Ammo.btCylinderShape(_vec3_1); | |
| setShapeCache( cache_key, shape ); | |
| } | |
| break; | |
| case 'capsule': | |
| cache_key = 'capsule_' + description.radius + '_' + description.height; | |
| if ( ( shape = getShapeFromCache( cache_key ) ) === null ) { | |
| // In Bullet, capsule height excludes the end spheres | |
| shape = new Ammo.btCapsuleShape( description.radius, description.height - 2 * description.radius ); | |
| setShapeCache( cache_key, shape ); | |
| } | |
| break; | |
| case 'cone': | |
| cache_key = 'cone_' + description.radius + '_' + description.height; | |
| if ( ( shape = getShapeFromCache( cache_key ) ) === null ) { | |
| shape = new Ammo.btConeShape( description.radius, description.height ); | |
| setShapeCache( cache_key, shape ); | |
| } | |
| break; | |
| case 'concave': | |
| var i, triangle, triangle_mesh = new Ammo.btTriangleMesh; | |
| if (!description.triangles.length) return false | |
| for ( i = 0; i < description.triangles.length; i++ ) { | |
| triangle = description.triangles[i]; | |
| _vec3_1.setX(triangle[0].x); | |
| _vec3_1.setY(triangle[0].y); | |
| _vec3_1.setZ(triangle[0].z); | |
| _vec3_2.setX(triangle[1].x); | |
| _vec3_2.setY(triangle[1].y); | |
| _vec3_2.setZ(triangle[1].z); | |
| _vec3_3.setX(triangle[2].x); | |
| _vec3_3.setY(triangle[2].y); | |
| _vec3_3.setZ(triangle[2].z); | |
| triangle_mesh.addTriangle( | |
| _vec3_1, | |
| _vec3_2, | |
| _vec3_3, | |
| true | |
| ); | |
| } | |
| shape = new Ammo.btBvhTriangleMeshShape( | |
| triangle_mesh, | |
| true, | |
| true | |
| ); | |
| _noncached_shapes[description.id] = shape; | |
| break; | |
| case 'convex': | |
| var i, point, shape = new Ammo.btConvexHullShape; | |
| for ( i = 0; i < description.points.length; i++ ) { | |
| point = description.points[i]; | |
| _vec3_1.setX(point.x); | |
| _vec3_1.setY(point.y); | |
| _vec3_1.setZ(point.z); | |
| shape.addPoint(_vec3_1); | |
| } | |
| _noncached_shapes[description.id] = shape; | |
| break; | |
| case 'heightfield': | |
| var ptr = Ammo.allocate(4 * description.xpts * description.ypts, "float", Ammo.ALLOC_NORMAL); | |
| for (var f = 0; f < description.points.length; f++) { | |
| Ammo.setValue(ptr + f, description.points[f] , 'float'); | |
| } | |
| shape = new Ammo.btHeightfieldTerrainShape( | |
| description.xpts, | |
| description.ypts, | |
| ptr, | |
| 1, | |
| -description.absMaxHeight, | |
| description.absMaxHeight, | |
| 2, | |
| 0, | |
| false | |
| ); | |
| _vec3_1.setX(description.xsize/(description.xpts - 1)); | |
| _vec3_1.setY(description.ysize/(description.ypts - 1)); | |
| _vec3_1.setZ(1); | |
| shape.setLocalScaling(_vec3_1); | |
| _noncached_shapes[description.id] = shape; | |
| break; | |
| default: | |
| // Not recognized | |
| return; | |
| break; | |
| } | |
| return shape; | |
| }; | |
| public_functions.init = function( params ) { | |
| importScripts( params.ammo ); | |
| _transform = new Ammo.btTransform; | |
| _vec3_1 = new Ammo.btVector3(0,0,0); | |
| _vec3_2 = new Ammo.btVector3(0,0,0); | |
| _vec3_3 = new Ammo.btVector3(0,0,0); | |
| _quat = new Ammo.btQuaternion(0,0,0,0); | |
| REPORT_CHUNKSIZE = params.reportsize || 50; | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| // Transferable messages are supported, take advantage of them with TypedArrays | |
| worldreport = new Float32Array(2 + REPORT_CHUNKSIZE * WORLDREPORT_ITEMSIZE); // message id + # of objects to report + chunk size * # of values per object | |
| collisionreport = new Float32Array(2 + REPORT_CHUNKSIZE * COLLISIONREPORT_ITEMSIZE); // message id + # of collisions to report + chunk size * # of values per object | |
| vehiclereport = new Float32Array(2 + REPORT_CHUNKSIZE * VEHICLEREPORT_ITEMSIZE); // message id + # of vehicles to report + chunk size * # of values per object | |
| constraintreport = new Float32Array(2 + REPORT_CHUNKSIZE * CONSTRAINTREPORT_ITEMSIZE); // message id + # of constraints to report + chunk size * # of values per object | |
| } else { | |
| // Transferable messages are not supported, send data as normal arrays | |
| worldreport = []; | |
| collisionreport = []; | |
| vehiclereport = []; | |
| constraintreport = []; | |
| } | |
| worldreport[0] = MESSAGE_TYPES.WORLDREPORT; | |
| collisionreport[0] = MESSAGE_TYPES.COLLISIONREPORT; | |
| vehiclereport[0] = MESSAGE_TYPES.VEHICLEREPORT; | |
| constraintreport[0] = MESSAGE_TYPES.CONSTRAINTREPORT; | |
| var collisionConfiguration = new Ammo.btDefaultCollisionConfiguration, | |
| dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration ), | |
| solver = new Ammo.btSequentialImpulseConstraintSolver, | |
| broadphase; | |
| if ( !params.broadphase ) params.broadphase = { type: 'dynamic' }; | |
| switch ( params.broadphase.type ) { | |
| case 'sweepprune': | |
| _vec3_1.setX(params.broadphase.aabbmin.x); | |
| _vec3_1.setY(params.broadphase.aabbmin.y); | |
| _vec3_1.setZ(params.broadphase.aabbmin.z); | |
| _vec3_2.setX(params.broadphase.aabbmax.x); | |
| _vec3_2.setY(params.broadphase.aabbmax.y); | |
| _vec3_2.setZ(params.broadphase.aabbmax.z); | |
| broadphase = new Ammo.btAxisSweep3( | |
| _vec3_1, | |
| _vec3_2 | |
| ); | |
| break; | |
| case 'dynamic': | |
| default: | |
| broadphase = new Ammo.btDbvtBroadphase; | |
| break; | |
| } | |
| world = new Ammo.btDiscreteDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration ); | |
| fixedTimeStep = params.fixedTimeStep; | |
| rateLimit = params.rateLimit; | |
| transferableMessage({ cmd: 'worldReady' }); | |
| }; | |
| public_functions.registerMaterial = function( description ) { | |
| _materials[ description.id ] = description; | |
| }; | |
| public_functions.unRegisterMaterial = function( description ) { | |
| delete _materials[ description.id ]; | |
| }; | |
| public_functions.setFixedTimeStep = function( description ) { | |
| fixedTimeStep = description; | |
| }; | |
| public_functions.setGravity = function( description ) { | |
| _vec3_1.setX(description.x); | |
| _vec3_1.setY(description.y); | |
| _vec3_1.setZ(description.z); | |
| world.setGravity(_vec3_1); | |
| }; | |
| public_functions.addObject = function( description ) { | |
| var i, | |
| localInertia, shape, motionState, rbInfo, body; | |
| shape = createShape( description ); | |
| if (!shape) return | |
| // If there are children then this is a compound shape | |
| if ( description.children ) { | |
| var compound_shape = new Ammo.btCompoundShape, _child; | |
| compound_shape.addChildShape( _transform, shape ); | |
| for ( i = 0; i < description.children.length; i++ ) { | |
| _child = description.children[i]; | |
| var trans = new Ammo.btTransform; | |
| trans.setIdentity(); | |
| _vec3_1.setX(_child.position_offset.x); | |
| _vec3_1.setY(_child.position_offset.y); | |
| _vec3_1.setZ(_child.position_offset.z); | |
| trans.setOrigin(_vec3_1); | |
| _quat.setX(_child.rotation.x); | |
| _quat.setY(_child.rotation.y); | |
| _quat.setZ(_child.rotation.z); | |
| _quat.setW(_child.rotation.w); | |
| trans.setRotation(_quat); | |
| shape = createShape( description.children[i] ); | |
| compound_shape.addChildShape( trans, shape ); | |
| Ammo.destroy(trans); | |
| } | |
| shape = compound_shape; | |
| _compound_shapes[ description.id ] = shape; | |
| } | |
| _vec3_1.setX(0); | |
| _vec3_1.setY(0); | |
| _vec3_1.setZ(0); | |
| shape.calculateLocalInertia( description.mass, _vec3_1 ); | |
| _transform.setIdentity(); | |
| _vec3_2.setX(description.position.x); | |
| _vec3_2.setY(description.position.y); | |
| _vec3_2.setZ(description.position.z); | |
| _transform.setOrigin(_vec3_2); | |
| _quat.setX(description.rotation.x); | |
| _quat.setY(description.rotation.y); | |
| _quat.setZ(description.rotation.z); | |
| _quat.setW(description.rotation.w); | |
| _transform.setRotation(_quat); | |
| motionState = new Ammo.btDefaultMotionState( _transform ); // #TODO: btDefaultMotionState supports center of mass offset as second argument - implement | |
| rbInfo = new Ammo.btRigidBodyConstructionInfo( description.mass, motionState, shape, _vec3_1 ); | |
| if ( description.materialId !== undefined ) { | |
| rbInfo.set_m_friction( _materials[ description.materialId ].friction ); | |
| rbInfo.set_m_restitution( _materials[ description.materialId ].restitution ); | |
| } | |
| body = new Ammo.btRigidBody( rbInfo ); | |
| Ammo.destroy(rbInfo); | |
| if ( typeof description.collision_flags !== 'undefined' ) { | |
| body.setCollisionFlags( description.collision_flags ); | |
| } | |
| world.addRigidBody( body ); | |
| body.id = description.id; | |
| _objects[ body.id ] = body; | |
| _motion_states[ body.id ] = motionState; | |
| var ptr = body.a != undefined ? body.a : body.ptr; | |
| _objects_ammo[ptr] = body.id; | |
| _num_objects++; | |
| transferableMessage({ cmd: 'objectReady', params: body.id }); | |
| }; | |
| public_functions.addVehicle = function( description ) { | |
| var vehicle_tuning = new Ammo.btVehicleTuning(), | |
| vehicle; | |
| vehicle_tuning.set_m_suspensionStiffness( description.suspension_stiffness ); | |
| vehicle_tuning.set_m_suspensionCompression( description.suspension_compression ); | |
| vehicle_tuning.set_m_suspensionDamping( description.suspension_damping ); | |
| vehicle_tuning.set_m_maxSuspensionTravelCm( description.max_suspension_travel ); | |
| vehicle_tuning.set_m_maxSuspensionForce( description.max_suspension_force ); | |
| vehicle = new Ammo.btRaycastVehicle( vehicle_tuning, _objects[ description.rigidBody ], new Ammo.btDefaultVehicleRaycaster( world ) ); | |
| vehicle.tuning = vehicle_tuning; | |
| _objects[ description.rigidBody ].setActivationState( 4 ); | |
| vehicle.setCoordinateSystem( 0, 1, 2 ); | |
| world.addVehicle( vehicle ); | |
| _vehicles[ description.id ] = vehicle; | |
| }; | |
| public_functions.removeVehicle = function( description ) { | |
| delete _vehicles[ description.id ]; | |
| }; | |
| public_functions.addWheel = function( description ) { | |
| if ( _vehicles[description.id] !== undefined ) { | |
| var tuning = _vehicles[description.id].tuning; | |
| if ( description.tuning !== undefined ) { | |
| tuning = new Ammo.btVehicleTuning(); | |
| tuning.set_m_suspensionStiffness( description.tuning.suspension_stiffness ); | |
| tuning.set_m_suspensionCompression( description.tuning.suspension_compression ); | |
| tuning.set_m_suspensionDamping( description.tuning.suspension_damping ); | |
| tuning.set_m_maxSuspensionTravelCm( description.tuning.max_suspension_travel ); | |
| tuning.set_m_maxSuspensionForce( description.tuning.max_suspension_force ); | |
| } | |
| _vec3_1.setX(description.connection_point.x); | |
| _vec3_1.setY(description.connection_point.y); | |
| _vec3_1.setZ(description.connection_point.z); | |
| _vec3_2.setX(description.wheel_direction.x); | |
| _vec3_2.setY(description.wheel_direction.y); | |
| _vec3_2.setZ(description.wheel_direction.z); | |
| _vec3_3.setX(description.wheel_axle.x); | |
| _vec3_3.setY(description.wheel_axle.y); | |
| _vec3_3.setZ(description.wheel_axle.z); | |
| _vehicles[description.id].addWheel( | |
| _vec3_1, | |
| _vec3_2, | |
| _vec3_3, | |
| description.suspension_rest_length, | |
| description.wheel_radius, | |
| tuning, | |
| description.is_front_wheel | |
| ); | |
| } | |
| _num_wheels++; | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| vehiclereport = new Float32Array(1 + _num_wheels * VEHICLEREPORT_ITEMSIZE); // message id & ( # of objects to report * # of values per object ) | |
| vehiclereport[0] = MESSAGE_TYPES.VEHICLEREPORT; | |
| } else { | |
| vehiclereport = [ MESSAGE_TYPES.VEHICLEREPORT ]; | |
| } | |
| }; | |
| public_functions.setSteering = function( details ) { | |
| if ( _vehicles[details.id] !== undefined ) { | |
| _vehicles[details.id].setSteeringValue( details.steering, details.wheel ); | |
| } | |
| }; | |
| public_functions.setBrake = function( details ) { | |
| if ( _vehicles[details.id] !== undefined ) { | |
| _vehicles[details.id].setBrake( details.brake, details.wheel ); | |
| } | |
| }; | |
| public_functions.applyEngineForce = function( details ) { | |
| if ( _vehicles[details.id] !== undefined ) { | |
| _vehicles[details.id].applyEngineForce( details.force, details.wheel ); | |
| } | |
| }; | |
| public_functions.removeObject = function( details ) { | |
| world.removeRigidBody( _objects[details.id] ); | |
| Ammo.destroy(_objects[details.id]); | |
| Ammo.destroy(_motion_states[details.id]); | |
| if (_compound_shapes[details.id]) Ammo.destroy(_compound_shapes[details.id]); | |
| if (_noncached_shapes[details.id]) Ammo.destroy(_noncached_shapes[details.id]); | |
| var ptr = _objects[details.id].a != undefined ? _objects[details.id].a : _objects[details.id].ptr; | |
| delete _objects_ammo[ptr]; | |
| delete _objects[details.id]; | |
| delete _motion_states[details.id]; | |
| if (_compound_shapes[details.id]) delete _compound_shapes[details.id]; | |
| if (_noncached_shapes[details.id]) delete _noncached_shapes[details.id]; | |
| _num_objects--; | |
| }; | |
| public_functions.updateTransform = function( details ) { | |
| _object = _objects[details.id]; | |
| _object.getMotionState().getWorldTransform( _transform ); | |
| if ( details.pos ) { | |
| _vec3_1.setX(details.pos.x); | |
| _vec3_1.setY(details.pos.y); | |
| _vec3_1.setZ(details.pos.z); | |
| _transform.setOrigin(_vec3_1); | |
| } | |
| if ( details.quat ) { | |
| _quat.setX(details.quat.x); | |
| _quat.setY(details.quat.y); | |
| _quat.setZ(details.quat.z); | |
| _quat.setW(details.quat.w); | |
| _transform.setRotation(_quat); | |
| } | |
| _object.setWorldTransform( _transform ); | |
| _object.activate(); | |
| }; | |
| public_functions.updateMass = function( details ) { | |
| // #TODO: changing a static object into dynamic is buggy | |
| _object = _objects[details.id]; | |
| // Per http://www.bulletphysics.org/Bullet/phpBB3/viewtopic.php?p=&f=9&t=3663#p13816 | |
| world.removeRigidBody( _object ); | |
| _vec3_1.setX(0); | |
| _vec3_1.setY(0); | |
| _vec3_1.setZ(0); | |
| _object.setMassProps( details.mass, _vec3_1 ); | |
| world.addRigidBody( _object ); | |
| _object.activate(); | |
| }; | |
| public_functions.applyCentralImpulse = function ( details ) { | |
| _vec3_1.setX(details.x); | |
| _vec3_1.setY(details.y); | |
| _vec3_1.setZ(details.z); | |
| _objects[details.id].applyCentralImpulse(_vec3_1); | |
| _objects[details.id].activate(); | |
| }; | |
| public_functions.applyImpulse = function ( details ) { | |
| _vec3_1.setX(details.impulse_x); | |
| _vec3_1.setY(details.impulse_y); | |
| _vec3_1.setZ(details.impulse_z); | |
| _vec3_2.setX(details.x); | |
| _vec3_2.setY(details.y); | |
| _vec3_2.setZ(details.z); | |
| _objects[details.id].applyImpulse( | |
| _vec3_1, | |
| _vec3_2 | |
| ); | |
| _objects[details.id].activate(); | |
| }; | |
| public_functions.applyCentralForce = function ( details ) { | |
| _vec3_1.setX(details.x); | |
| _vec3_1.setY(details.y); | |
| _vec3_1.setZ(details.z); | |
| _objects[details.id].applyCentralForce(_vec3_1); | |
| _objects[details.id].activate(); | |
| }; | |
| public_functions.applyForce = function ( details ) { | |
| _vec3_1.setX(details.impulse_x); | |
| _vec3_1.setY(details.impulse_y); | |
| _vec3_1.setZ(details.impulse_z); | |
| _vec3_2.setX(details.x); | |
| _vec3_2.setY(details.y); | |
| _vec3_2.setZ(details.z); | |
| _objects[details.id].applyForce( | |
| _vec3_1, | |
| _vec3_2 | |
| ); | |
| _objects[details.id].activate(); | |
| }; | |
| public_functions.setAngularVelocity = function ( details ) { | |
| _vec3_1.setX(details.x); | |
| _vec3_1.setY(details.y); | |
| _vec3_1.setZ(details.z); | |
| _objects[details.id].setAngularVelocity( | |
| _vec3_1 | |
| ); | |
| _objects[details.id].activate(); | |
| }; | |
| public_functions.setLinearVelocity = function ( details ) { | |
| _vec3_1.setX(details.x); | |
| _vec3_1.setY(details.y); | |
| _vec3_1.setZ(details.z); | |
| _objects[details.id].setLinearVelocity( | |
| _vec3_1 | |
| ); | |
| _objects[details.id].activate(); | |
| }; | |
| public_functions.setAngularFactor = function ( details ) { | |
| _vec3_1.setX(details.x); | |
| _vec3_1.setY(details.y); | |
| _vec3_1.setZ(details.z); | |
| _objects[details.id].setAngularFactor( | |
| _vec3_1 | |
| ); | |
| }; | |
| public_functions.setLinearFactor = function ( details ) { | |
| _vec3_1.setX(details.x); | |
| _vec3_1.setY(details.y); | |
| _vec3_1.setZ(details.z); | |
| _objects[details.id].setLinearFactor( | |
| _vec3_1 | |
| ); | |
| }; | |
| public_functions.setDamping = function ( details ) { | |
| _objects[details.id].setDamping( details.linear, details.angular ); | |
| }; | |
| public_functions.setCcdMotionThreshold = function ( details ) { | |
| _objects[details.id].setCcdMotionThreshold( details.threshold ); | |
| }; | |
| public_functions.setCcdSweptSphereRadius = function ( details ) { | |
| _objects[details.id].setCcdSweptSphereRadius( details.radius ); | |
| }; | |
| public_functions.addConstraint = function ( details ) { | |
| var constraint; | |
| switch ( details.type ) { | |
| case 'point': | |
| if ( details.objectb === undefined ) { | |
| _vec3_1.setX(details.positiona.x); | |
| _vec3_1.setY(details.positiona.y); | |
| _vec3_1.setZ(details.positiona.z); | |
| constraint = new Ammo.btPoint2PointConstraint( | |
| _objects[ details.objecta ], | |
| _vec3_1 | |
| ); | |
| } else { | |
| _vec3_1.setX(details.positiona.x); | |
| _vec3_1.setY(details.positiona.y); | |
| _vec3_1.setZ(details.positiona.z); | |
| _vec3_2.setX(details.positionb.x); | |
| _vec3_2.setY(details.positionb.y); | |
| _vec3_2.setZ(details.positionb.z); | |
| constraint = new Ammo.btPoint2PointConstraint( | |
| _objects[ details.objecta ], | |
| _objects[ details.objectb ], | |
| _vec3_1, | |
| _vec3_2 | |
| ); | |
| } | |
| break; | |
| case 'hinge': | |
| if ( details.objectb === undefined ) { | |
| _vec3_1.setX(details.positiona.x); | |
| _vec3_1.setY(details.positiona.y); | |
| _vec3_1.setZ(details.positiona.z); | |
| _vec3_2.setX(details.axis.x); | |
| _vec3_2.setY(details.axis.y); | |
| _vec3_2.setZ(details.axis.z); | |
| constraint = new Ammo.btHingeConstraint( | |
| _objects[ details.objecta ], | |
| _vec3_1, | |
| _vec3_2 | |
| ); | |
| } else { | |
| _vec3_1.setX(details.positiona.x); | |
| _vec3_1.setY(details.positiona.y); | |
| _vec3_1.setZ(details.positiona.z); | |
| _vec3_2.setX(details.positionb.x); | |
| _vec3_2.setY(details.positionb.y); | |
| _vec3_2.setZ(details.positionb.z); | |
| _vec3_3.setX(details.axis.x); | |
| _vec3_3.setY(details.axis.y); | |
| _vec3_3.setZ(details.axis.z); | |
| constraint = new Ammo.btHingeConstraint( | |
| _objects[ details.objecta ], | |
| _objects[ details.objectb ], | |
| _vec3_1, | |
| _vec3_2, | |
| _vec3_3, | |
| _vec3_3 | |
| ); | |
| } | |
| break; | |
| case 'slider': | |
| var transforma, transformb, rotation; | |
| transforma = new Ammo.btTransform(); | |
| _vec3_1.setX(details.positiona.x); | |
| _vec3_1.setY(details.positiona.y); | |
| _vec3_1.setZ(details.positiona.z); | |
| transforma.setOrigin(_vec3_1); | |
| var rotation = transforma.getRotation(); | |
| rotation.setEuler( details.axis.x, details.axis.y, details.axis.z ); | |
| transforma.setRotation( rotation ); | |
| if ( details.objectb ) { | |
| transformb = new Ammo.btTransform(); | |
| _vec3_2.setX(details.positionb.x); | |
| _vec3_2.setY(details.positionb.y); | |
| _vec3_2.setZ(details.positionb.z); | |
| transformb.setOrigin(_vec3_2); | |
| rotation = transformb.getRotation(); | |
| rotation.setEuler( details.axis.x, details.axis.y, details.axis.z ); | |
| transformb.setRotation( rotation ); | |
| constraint = new Ammo.btSliderConstraint( | |
| _objects[ details.objecta ], | |
| _objects[ details.objectb ], | |
| transforma, | |
| transformb, | |
| true | |
| ); | |
| } else { | |
| constraint = new Ammo.btSliderConstraint( | |
| _objects[ details.objecta ], | |
| transforma, | |
| true | |
| ); | |
| } | |
| Ammo.destroy(transforma); | |
| if (transformb != undefined) { | |
| Ammo.destroy(transformb); | |
| } | |
| break; | |
| case 'conetwist': | |
| var transforma, transformb; | |
| transforma = new Ammo.btTransform(); | |
| transforma.setIdentity(); | |
| transformb = new Ammo.btTransform(); | |
| transformb.setIdentity(); | |
| _vec3_1.setX(details.positiona.x); | |
| _vec3_1.setY(details.positiona.y); | |
| _vec3_1.setZ(details.positiona.z); | |
| _vec3_2.setX(details.positionb.x); | |
| _vec3_2.setY(details.positionb.y); | |
| _vec3_2.setZ(details.positionb.z); | |
| transforma.setOrigin(_vec3_1); | |
| transformb.setOrigin(_vec3_2); | |
| var rotation = transforma.getRotation(); | |
| rotation.setEulerZYX( -details.axisa.z, -details.axisa.y, -details.axisa.x ); | |
| transforma.setRotation( rotation ); | |
| rotation = transformb.getRotation(); | |
| rotation.setEulerZYX( -details.axisb.z, -details.axisb.y, -details.axisb.x ); | |
| transformb.setRotation( rotation ); | |
| constraint = new Ammo.btConeTwistConstraint( | |
| _objects[ details.objecta ], | |
| _objects[ details.objectb ], | |
| transforma, | |
| transformb | |
| ); | |
| constraint.setLimit( Math.PI, 0, Math.PI ); | |
| Ammo.destroy(transforma); | |
| Ammo.destroy(transformb); | |
| break; | |
| case 'dof': | |
| var transforma, transformb, rotation; | |
| transforma = new Ammo.btTransform(); | |
| transforma.setIdentity(); | |
| _vec3_1.setX(details.positiona.x); | |
| _vec3_1.setY(details.positiona.y); | |
| _vec3_1.setZ(details.positiona.z); | |
| transforma.setOrigin(_vec3_1 ); | |
| rotation = transforma.getRotation(); | |
| rotation.setEulerZYX( -details.axisa.z, -details.axisa.y, -details.axisa.x ); | |
| transforma.setRotation( rotation ); | |
| if ( details.objectb ) { | |
| transformb = new Ammo.btTransform(); | |
| transformb.setIdentity(); | |
| _vec3_2.setX(details.positionb.x); | |
| _vec3_2.setY(details.positionb.y); | |
| _vec3_2.setZ(details.positionb.z); | |
| transformb.setOrigin(_vec3_2); | |
| rotation = transformb.getRotation(); | |
| rotation.setEulerZYX( -details.axisb.z, -details.axisb.y, -details.axisb.x ); | |
| transformb.setRotation( rotation ); | |
| constraint = new Ammo.btGeneric6DofConstraint( | |
| _objects[ details.objecta ], | |
| _objects[ details.objectb ], | |
| transforma, | |
| transformb | |
| ); | |
| } else { | |
| constraint = new Ammo.btGeneric6DofConstraint( | |
| _objects[ details.objecta ], | |
| transforma | |
| ); | |
| } | |
| Ammo.destroy(transforma); | |
| if (transformb != undefined) { | |
| Ammo.destroy(transformb); | |
| } | |
| break; | |
| default: | |
| return; | |
| }; | |
| world.addConstraint( constraint ); | |
| constraint.enableFeedback(); | |
| _constraints[ details.id ] = constraint; | |
| _num_constraints++; | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| constraintreport = new Float32Array(1 + _num_constraints * CONSTRAINTREPORT_ITEMSIZE); // message id & ( # of objects to report * # of values per object ) | |
| constraintreport[0] = MESSAGE_TYPES.CONSTRAINTREPORT; | |
| } else { | |
| constraintreport = [ MESSAGE_TYPES.CONSTRAINTREPORT ]; | |
| } | |
| }; | |
| public_functions.removeConstraint = function( details ) { | |
| var constraint = _constraints[ details.id ]; | |
| if ( constraint !== undefined ) { | |
| world.removeConstraint( constraint ); | |
| delete _constraints[ details.id ]; | |
| _num_constraints--; | |
| } | |
| }; | |
| public_functions.constraint_setBreakingImpulseThreshold = function( details ) { | |
| var constraint = _constraints[ details.id ]; | |
| if ( constraint !== undefind ) { | |
| constraint.setBreakingImpulseThreshold( details.threshold ); | |
| } | |
| }; | |
| public_functions.simulate = function simulate( params ) { | |
| if ( world ) { | |
| params = params || {}; | |
| if ( !params.timeStep ) { | |
| if ( last_simulation_time ) { | |
| params.timeStep = 0; | |
| while ( params.timeStep + last_simulation_duration <= fixedTimeStep ) { | |
| params.timeStep = ( Date.now() - last_simulation_time ) / 1000; // time since last simulation | |
| } | |
| } else { | |
| params.timeStep = fixedTimeStep; // handle first frame | |
| } | |
| } else { | |
| if ( params.timeStep < fixedTimeStep ) { | |
| params.timeStep = fixedTimeStep; | |
| } | |
| } | |
| params.maxSubSteps = params.maxSubSteps || Math.ceil( params.timeStep / fixedTimeStep ); // If maxSubSteps is not defined, keep the simulation fully up to date | |
| last_simulation_duration = Date.now(); | |
| world.stepSimulation( params.timeStep, params.maxSubSteps, fixedTimeStep ); | |
| reportVehicles(); | |
| reportCollisions(); | |
| reportConstraints(); | |
| reportWorld(); | |
| last_simulation_duration = ( Date.now() - last_simulation_duration ) / 1000; | |
| last_simulation_time = Date.now(); | |
| } | |
| }; | |
| // Constraint functions | |
| public_functions.hinge_setLimits = function( params ) { | |
| _constraints[ params.constraint ].setLimit( params.low, params.high, 0, params.bias_factor, params.relaxation_factor ); | |
| }; | |
| public_functions.hinge_enableAngularMotor = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| constraint.enableAngularMotor( true, params.velocity, params.acceleration ); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.hinge_disableMotor = function( params ) { | |
| _constraints[ params.constraint ].enableMotor( false ); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.slider_setLimits = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| constraint.setLowerLinLimit( params.lin_lower || 0 ); | |
| constraint.setUpperLinLimit( params.lin_upper || 0 ); | |
| constraint.setLowerAngLimit( params.ang_lower || 0 ); | |
| constraint.setUpperAngLimit( params.ang_upper || 0 ); | |
| }; | |
| public_functions.slider_setRestitution = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| constraint.setSoftnessLimLin( params.linear || 0 ); | |
| constraint.setSoftnessLimAng( params.angular || 0 ); | |
| }; | |
| public_functions.slider_enableLinearMotor = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| constraint.setTargetLinMotorVelocity( params.velocity ); | |
| constraint.setMaxLinMotorForce( params.acceleration ); | |
| constraint.setPoweredLinMotor( true ); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.slider_disableLinearMotor = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| constraint.setPoweredLinMotor( false ); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.slider_enableAngularMotor = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| constraint.setTargetAngMotorVelocity( params.velocity ); | |
| constraint.setMaxAngMotorForce( params.acceleration ); | |
| constraint.setPoweredAngMotor( true ); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.slider_disableAngularMotor = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| constraint.setPoweredAngMotor( false ); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.conetwist_setLimit = function( params ) { | |
| _constraints[ params.constraint ].setLimit( params.z, params.y, params.x ); // ZYX order | |
| }; | |
| public_functions.conetwist_enableMotor = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| constraint.enableMotor( true ); | |
| constraint.getRigidBodyA().activate(); | |
| constraint.getRigidBodyB().activate(); | |
| }; | |
| public_functions.conetwist_setMaxMotorImpulse = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| constraint.setMaxMotorImpulse( params.max_impulse ); | |
| constraint.getRigidBodyA().activate(); | |
| constraint.getRigidBodyB().activate(); | |
| }; | |
| public_functions.conetwist_setMotorTarget = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| _quat.setX(params.x); | |
| _quat.setY(params.y); | |
| _quat.setZ(params.z); | |
| _quat.setW(params.w); | |
| constraint.setMotorTarget(_quat); | |
| constraint.getRigidBodyA().activate(); | |
| constraint.getRigidBodyB().activate(); | |
| }; | |
| public_functions.conetwist_disableMotor = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| constraint.enableMotor( false ); | |
| constraint.getRigidBodyA().activate(); | |
| constraint.getRigidBodyB().activate(); | |
| }; | |
| public_functions.dof_setLinearLowerLimit = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| _vec3_1.setX(params.x); | |
| _vec3_1.setY(params.y); | |
| _vec3_1.setZ(params.z); | |
| constraint.setLinearLowerLimit(_vec3_1); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.dof_setLinearUpperLimit = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| _vec3_1.setX(params.x); | |
| _vec3_1.setY(params.y); | |
| _vec3_1.setZ(params.z); | |
| constraint.setLinearUpperLimit(_vec3_1); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.dof_setAngularLowerLimit = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| _vec3_1.setX(params.x); | |
| _vec3_1.setY(params.y); | |
| _vec3_1.setZ(params.z); | |
| constraint.setAngularLowerLimit(_vec3_1); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.dof_setAngularUpperLimit = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| _vec3_1.setX(params.x); | |
| _vec3_1.setY(params.y); | |
| _vec3_1.setZ(params.z); | |
| constraint.setAngularUpperLimit(_vec3_1); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.dof_enableAngularMotor = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| var motor = constraint.getRotationalLimitMotor( params.which ); | |
| motor.set_m_enableMotor( true ); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.dof_configureAngularMotor = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| var motor = constraint.getRotationalLimitMotor( params.which ); | |
| motor.set_m_loLimit( params.low_angle ); | |
| motor.set_m_hiLimit( params.high_angle ); | |
| motor.set_m_targetVelocity( params.velocity ); | |
| motor.set_m_maxMotorForce( params.max_force ); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| public_functions.dof_disableAngularMotor = function( params ) { | |
| var constraint = _constraints[ params.constraint ]; | |
| var motor = constraint.getRotationalLimitMotor( params.which ); | |
| motor.set_m_enableMotor( false ); | |
| constraint.getRigidBodyA().activate(); | |
| if ( constraint.getRigidBodyB() ) { | |
| constraint.getRigidBodyB().activate(); | |
| } | |
| }; | |
| reportWorld = function() { | |
| var index, object, | |
| transform, origin, rotation, | |
| offset = 0, | |
| i = 0; | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| if ( worldreport.length < 2 + _num_objects * WORLDREPORT_ITEMSIZE ) { | |
| worldreport = new Float32Array( | |
| 2 + // message id & # objects in report | |
| ( Math.ceil( _num_objects / REPORT_CHUNKSIZE ) * REPORT_CHUNKSIZE ) * WORLDREPORT_ITEMSIZE // # of values needed * item size | |
| ); | |
| worldreport[0] = MESSAGE_TYPES.WORLDREPORT; | |
| } | |
| } | |
| worldreport[1] = _num_objects; // record how many objects we're reporting on | |
| //for ( i = 0; i < worldreport[1]; i++ ) { | |
| for ( index in _objects ) { | |
| if ( _objects.hasOwnProperty( index ) ) { | |
| object = _objects[index]; | |
| // #TODO: we can't use center of mass transform when center of mass can change, | |
| // but getMotionState().getWorldTransform() screws up on objects that have been moved | |
| //object.getMotionState().getWorldTransform( transform ); | |
| transform = object.getCenterOfMassTransform(); | |
| origin = transform.getOrigin(); | |
| rotation = transform.getRotation(); | |
| // add values to report | |
| offset = 2 + (i++) * WORLDREPORT_ITEMSIZE; | |
| worldreport[ offset ] = object.id; | |
| worldreport[ offset + 1 ] = origin.x(); | |
| worldreport[ offset + 2 ] = origin.y(); | |
| worldreport[ offset + 3 ] = origin.z(); | |
| worldreport[ offset + 4 ] = rotation.x(); | |
| worldreport[ offset + 5 ] = rotation.y(); | |
| worldreport[ offset + 6 ] = rotation.z(); | |
| worldreport[ offset + 7 ] = rotation.w(); | |
| _vector = object.getLinearVelocity(); | |
| worldreport[ offset + 8 ] = _vector.x(); | |
| worldreport[ offset + 9 ] = _vector.y(); | |
| worldreport[ offset + 10 ] = _vector.z(); | |
| _vector = object.getAngularVelocity(); | |
| worldreport[ offset + 11 ] = _vector.x(); | |
| worldreport[ offset + 12 ] = _vector.y(); | |
| worldreport[ offset + 13 ] = _vector.z(); | |
| } | |
| } | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| transferableMessage( worldreport.buffer, [worldreport.buffer] ); | |
| } else { | |
| transferableMessage( worldreport ); | |
| } | |
| }; | |
| reportCollisions = function() { | |
| var i, offset, | |
| dp = world.getDispatcher(), | |
| num = dp.getNumManifolds(), | |
| manifold, num_contacts, j, pt, | |
| _collided = false; | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| if ( collisionreport.length < 2 + num * COLLISIONREPORT_ITEMSIZE ) { | |
| collisionreport = new Float32Array( | |
| 2 + // message id & # objects in report | |
| ( Math.ceil( _num_objects / REPORT_CHUNKSIZE ) * REPORT_CHUNKSIZE ) * COLLISIONREPORT_ITEMSIZE // # of values needed * item size | |
| ); | |
| collisionreport[0] = MESSAGE_TYPES.COLLISIONREPORT; | |
| } | |
| } | |
| collisionreport[1] = 0; // how many collisions we're reporting on | |
| for ( i = 0; i < num; i++ ) { | |
| manifold = dp.getManifoldByIndexInternal( i ); | |
| num_contacts = manifold.getNumContacts(); | |
| if ( num_contacts === 0 ) { | |
| continue; | |
| } | |
| for ( j = 0; j < num_contacts; j++ ) { | |
| pt = manifold.getContactPoint( j ); | |
| //if ( pt.getDistance() < 0 ) { | |
| offset = 2 + (collisionreport[1]++) * COLLISIONREPORT_ITEMSIZE; | |
| collisionreport[ offset ] = _objects_ammo[ manifold.getBody0() ]; | |
| collisionreport[ offset + 1 ] = _objects_ammo[ manifold.getBody1() ]; | |
| _vector = pt.get_m_normalWorldOnB(); | |
| collisionreport[ offset + 2 ] = _vector.x(); | |
| collisionreport[ offset + 3 ] = _vector.y(); | |
| collisionreport[ offset + 4 ] = _vector.z(); | |
| break; | |
| //} | |
| transferableMessage( _objects_ammo ); | |
| } | |
| } | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| transferableMessage( collisionreport.buffer, [collisionreport.buffer] ); | |
| } else { | |
| transferableMessage( collisionreport ); | |
| } | |
| }; | |
| reportVehicles = function() { | |
| var index, vehicle, | |
| transform, origin, rotation, | |
| offset = 0, | |
| i = 0, j = 0; | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| if ( vehiclereport.length < 2 + _num_wheels * VEHICLEREPORT_ITEMSIZE ) { | |
| vehiclereport = new Float32Array( | |
| 2 + // message id & # objects in report | |
| ( Math.ceil( _num_wheels / REPORT_CHUNKSIZE ) * REPORT_CHUNKSIZE ) * VEHICLEREPORT_ITEMSIZE // # of values needed * item size | |
| ); | |
| vehiclereport[0] = MESSAGE_TYPES.VEHICLEREPORT; | |
| } | |
| } | |
| for ( index in _vehicles ) { | |
| if ( _vehicles.hasOwnProperty( index ) ) { | |
| vehicle = _vehicles[index]; | |
| for ( j = 0; j < vehicle.getNumWheels(); j++ ) { | |
| //vehicle.updateWheelTransform( j, true ); | |
| //transform = vehicle.getWheelTransformWS( j ); | |
| transform = vehicle.getWheelInfo( j ).get_m_worldTransform(); | |
| origin = transform.getOrigin(); | |
| rotation = transform.getRotation(); | |
| // add values to report | |
| offset = 1 + (i++) * VEHICLEREPORT_ITEMSIZE; | |
| vehiclereport[ offset ] = index; | |
| vehiclereport[ offset + 1 ] = j; | |
| vehiclereport[ offset + 2 ] = origin.x(); | |
| vehiclereport[ offset + 3 ] = origin.y(); | |
| vehiclereport[ offset + 4 ] = origin.z(); | |
| vehiclereport[ offset + 5 ] = rotation.x(); | |
| vehiclereport[ offset + 6 ] = rotation.y(); | |
| vehiclereport[ offset + 7 ] = rotation.z(); | |
| vehiclereport[ offset + 8 ] = rotation.w(); | |
| } | |
| } | |
| } | |
| if ( j !== 0 ) { | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| transferableMessage( vehiclereport.buffer, [vehiclereport.buffer] ); | |
| } else { | |
| transferableMessage( vehiclereport ); | |
| } | |
| } | |
| }; | |
| reportConstraints = function() { | |
| var index, constraint, | |
| offset_body, | |
| transform, origin, | |
| offset = 0, | |
| i = 0; | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| if ( constraintreport.length < 2 + _num_constraints * CONSTRAINTREPORT_ITEMSIZE ) { | |
| constraintreport = new Float32Array( | |
| 2 + // message id & # objects in report | |
| ( Math.ceil( _num_constraints / REPORT_CHUNKSIZE ) * REPORT_CHUNKSIZE ) * CONSTRAINTREPORT_ITEMSIZE // # of values needed * item size | |
| ); | |
| constraintreport[0] = MESSAGE_TYPES.CONSTRAINTREPORT; | |
| } | |
| } | |
| for ( index in _constraints ) { | |
| if ( _constraints.hasOwnProperty( index ) ) { | |
| constraint = _constraints[index]; | |
| offset_body = constraint.getRigidBodyA(); | |
| transform = constraint.getFrameOffsetA(); | |
| origin = transform.getOrigin(); | |
| // add values to report | |
| offset = 1 + (i++) * CONSTRAINTREPORT_ITEMSIZE; | |
| constraintreport[ offset ] = index; | |
| constraintreport[ offset + 1 ] = offset_body.id; | |
| constraintreport[ offset + 2 ] = origin.getX(); | |
| constraintreport[ offset + 3 ] = origin.getY(); | |
| constraintreport[ offset + 4 ] = origin.getZ(); | |
| constraintreport[ offset + 5 ] = constraint.getAppliedImpulse(); | |
| } | |
| } | |
| if ( i !== 0 ) { | |
| if ( SUPPORT_TRANSFERABLE ) { | |
| transferableMessage( constraintreport.buffer, [constraintreport.buffer] ); | |
| } else { | |
| transferableMessage( constraintreport ); | |
| } | |
| } | |
| }; | |
| self.onmessage = function( event ) { | |
| if ( event.data instanceof Float32Array ) { | |
| // transferable object | |
| switch ( event.data[0] ) { | |
| case MESSAGE_TYPES.WORLDREPORT: | |
| worldreport = new Float32Array( event.data ); | |
| break; | |
| case MESSAGE_TYPES.COLLISIONREPORT: | |
| collisionreport = new Float32Array( event.data ); | |
| break; | |
| case MESSAGE_TYPES.VEHICLEREPORT: | |
| vehiclereport = new Float32Array( event.data ); | |
| break; | |
| case MESSAGE_TYPES.CONSTRAINTREPORT: | |
| constraintreport = new Float32Array( event.data ); | |
| break; | |
| } | |
| return; | |
| } | |
| if ( event.data.cmd && public_functions[event.data.cmd] ) { | |
| //if ( event.data.params.id !== undefined && _objects[event.data.params.id] === undefined && event.data.cmd !== 'addObject' && event.data.cmd !== 'registerMaterial' ) return; | |
| public_functions[event.data.cmd]( event.data.params ); | |
| } | |
| }; | |
| </script> |
| ////////////////////////////////////////// | |
| /////////// BUS DERBY /////////// | |
| ////////////////////////////////////////// | |
| /////---Sources---///// | |
| Physijs.scripts.ammo = "https://chandlerprall.github.io/Physijs/examples/js/ammo.js"; | |
| //physijs_worker.js called from HTML script (needed so worker can be used in codepen) | |
| // Physijs.scripts.worker = "https://chandlerprall.github.io/Physijs/physijs_worker.js"; | |
| var blob = new Blob( [document.querySelector('#physijs_worker').textContent] ); | |
| Physijs.scripts.worker = window.URL.createObjectURL(blob); | |
| /////---Settings---///// | |
| var bwf = 3.5; //bus wheel friction | |
| var bwr = 0; //bus wheel restitution | |
| var pf = 4.2; //platform friction | |
| var pr = 0; //platform restitution | |
| var gravity = -50; | |
| /////---Initiation---///// | |
| var scene, environment, camera; | |
| var backgroundColor = 0xCDD3D6; | |
| var busArray = []; | |
| var Player1 = { name: "gretchen", score: 0 }; | |
| var Player2 = { name: "bertha", score: 0 }; | |
| var roundActive = false; | |
| var loadingAnimation = document.getElementById("loading_animation_page"); | |
| ///Renderer | |
| var renderer = new THREE.WebGLRenderer( { antialias: true } ); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| document.body.appendChild( renderer.domElement ); | |
| /////---Objects---///// | |
| ///--Environment---/// | |
| function Environment() { | |
| ///physi.js scene | |
| scene = new Physijs.Scene; | |
| scene.setGravity(new THREE.Vector3(0, gravity, 0)); | |
| ///background | |
| renderer.setClearColor (backgroundColor, 1); | |
| ///camera | |
| camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 1, 10000 ); | |
| camera.position.set( 0, 300, 600 ); | |
| camera.zoom = 3; | |
| scene.add( camera ); | |
| ///lighting & shadows | |
| var lightA1 = new THREE.AmbientLight(0xFFFFFF, 0.85); | |
| scene.add(lightA1); | |
| var lightD1 = new THREE.DirectionalLight( 0xFFFFFF, 0.3 ); | |
| lightD1.position.set( -20, 100, 20 ); | |
| lightD1.castShadow = true; | |
| lightD1.shadow.camera.left = -100; | |
| lightD1.shadow.camera.top = -100; | |
| lightD1.shadow.camera.right = 100; | |
| lightD1.shadow.camera.bottom = 100; | |
| lightD1.shadow.camera.near = 1; | |
| lightD1.shadow.camera.far = 130; | |
| lightD1.shadow.mapSize.height = lightD1.shadow.mapSize.width = 1000; | |
| scene.add( lightD1 ); | |
| renderer.shadowMap.enabled = true; | |
| renderer.shadowMap.type = THREE.PCFSoftShadowMap; | |
| ///fog | |
| scene.fog = new THREE.Fog( | |
| backgroundColor, | |
| camera.position.z + 35, | |
| camera.position.z + 250 | |
| ); | |
| ///platform | |
| var platform; | |
| var platformDiameter = 170; | |
| var platformRadiusTop = platformDiameter * 0.5; | |
| var platformRadiusBottom = platformDiameter * 0.5 + 0.2; | |
| var platformHeight = 1; | |
| var platformSegments = 85; | |
| var platformGeometry = new THREE.CylinderGeometry( | |
| platformRadiusTop, | |
| platformRadiusBottom, | |
| platformHeight, | |
| platformSegments | |
| ); | |
| //physi.js platform (invisible; provides structure) (separating three.js & physi.js improves peformance) | |
| var physiPlatformMaterial = Physijs.createMaterial( | |
| new THREE.MeshLambertMaterial(), pf, pr | |
| ); | |
| var physiPlatform = new Physijs.CylinderMesh(platformGeometry, physiPlatformMaterial, 0 ); | |
| physiPlatform.name = "physicalPlatform"; | |
| physiPlatform.position.set(0, -0.5, 0); | |
| physiPlatform.visible = false; | |
| scene.add( physiPlatform ); | |
| //three.js platform (visible; provides image) (separating three.js & physi.js improves peformance) | |
| var platformMaterialsArray = []; | |
| var platformMaterialColor = new THREE.MeshLambertMaterial( { color: 0x606060 } ); | |
| platformMaterialsArray.push( platformMaterialColor ); //(materialindex = 0) | |
| var platformImage = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/asphalt_texture_2.jpg"; | |
| var platformTextureLoader = new THREE.TextureLoader(); | |
| ptr = 4.5; //platform texture repeat | |
| platformTextureLoader.load(platformImage, function (texture) { | |
| //shrinks & repeats the image for the designate number of times | |
| texture.wrapS = texture.wrapT = THREE.RepeatWrapping; | |
| texture.repeat.set( ptr, ptr ); | |
| //sets textue | |
| var platformMaterialImage = new THREE.MeshLambertMaterial( { map: texture } ); | |
| platformMaterialsArray.push( platformMaterialImage ); //(materials index = 1) | |
| }); | |
| var faceCount = platformGeometry.faces.length; | |
| for ( i=0; i<faceCount; i++ ) { | |
| if ( i < platformSegments*2 ) { //(cylinder side) | |
| platformGeometry.faces[i].materialIndex = 0; | |
| } else if ( i < platformSegments*3 ) { //(cylinder top) | |
| platformGeometry.faces[i].materialIndex = 1; | |
| } else { //(cylinder bottom) | |
| platformGeometry.faces[i].materialIndex = 0; | |
| } | |
| } | |
| var visiblePlatform = new THREE.Mesh( platformGeometry, platformMaterialsArray ); | |
| visiblePlatform.name = "visiblePlatform" | |
| visiblePlatform.position.set(0, -.5, 0); | |
| visiblePlatform.rotation.y = .4; | |
| visiblePlatform.receiveShadow = true; | |
| scene.add( visiblePlatform ); | |
| } | |
| ///---Buses---/// | |
| function Bus(platformSide) { //platformSide should be "platformLeft" or "platformRight" | |
| var bus = this; | |
| bus.platformSide = platformSide; | |
| bus.score = 0; | |
| ///frame | |
| var bfp = ( bus.platformSide == "platformLeft" ? { x:-40, y:3, z:0 } : { x:40, y:3, z:0 } ); //bus frame position | |
| var busFrameGeometry = new THREE.BoxGeometry( 33, 4, 5 ); | |
| var busFrameMesh = new THREE.MeshStandardMaterial({ color: 0x333333 }); | |
| var busFrameMaterial = Physijs.createMaterial( busFrameMesh, 0.9, 0.9 ); | |
| bus.frame = new Physijs.BoxMesh(busFrameGeometry, busFrameMaterial, 100 ); | |
| bus.frame.name = "frame"; | |
| bus.frame.componentOf = "bus"; | |
| bus.frame.position.set( bfp.x, bfp.y, bfp.z ); | |
| bus.frame.castShadow = true; | |
| ///interior (provides mass to body for collisions) | |
| var busInteriorGeometry = new THREE.BoxGeometry( 33, 7, 11 ); | |
| var busInteriorMesh = new THREE.MeshStandardMaterial({ color: 0x777777 }); | |
| var busInteriorMaterial = Physijs.createMaterial( busInteriorMesh, 50, 50 ); | |
| bus.interior = new Physijs.BoxMesh(busInteriorGeometry, busInteriorMaterial, 5000 ); | |
| bus.interior.name = "interior"; | |
| bus.interior.visible = false; //(if visible, edges stick out from rounded frame) | |
| bus.interior.componentOf = "bus"; | |
| bus.interior.position.set( 0, 5.5, 0 ); | |
| bus.frame.add(bus.interior); | |
| ///body | |
| var color = ( bus.platformSide == "platformLeft" ? "green" : "red" ); | |
| var loader = new THREE.GLTFLoader(); | |
| loader.load( | |
| `https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_body_${color}.glb`, | |
| function ( gltf ) { | |
| var scale = 5.6; | |
| bus.body = gltf.scene.children[0]; | |
| bus.body.name = "body"; | |
| bus.body.componentOf = "bus"; | |
| bus.body.rotation.set ( 0, -1.5708, 0 ); | |
| bus.body.scale.set (scale,scale,scale); | |
| bus.body.position.set ( 0, 3.6, 0 ); | |
| bus.body.castShadow = true; | |
| bus.frame.add(bus.body); | |
| }, | |
| ); | |
| //rotates platformLeft bus 180 degress so facing right bus | |
| if ( bus.platformSide === "platformLeft" ) { bus.frame.rotation.y = Math.PI } | |
| //adds all static bus parts to the scene as a single physical object | |
| scene.add( bus.frame ); | |
| ///wheels | |
| var fr = 2; //wheel front radius | |
| var br = 2; //wheel back radius | |
| var wi = 1; //wheel width | |
| var segments = 50; //wheel cylinder segments (pie slices) | |
| var busWheelMaterialsArray = []; | |
| var busWheelImage = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_wheel_front_uv_fill.png"; | |
| var busWheelGeometry = new THREE.CylinderGeometry( fr, br, wi, segments ); | |
| //wheel side & back material (color only, no image) | |
| var busWheelColorBaseMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 }); | |
| var busWheelColorMaterial = Physijs.createMaterial( busWheelColorBaseMaterial, bwf, bwr ); | |
| busWheelMaterialsArray.push( busWheelColorMaterial ); //(.materialindex = 0) | |
| //wheel front material (wheel image) | |
| var busWheelImageLoader = new THREE.TextureLoader(); | |
| busWheelImageLoader.load( busWheelImage, function ( texture ) { | |
| var busWheelImageMaterial = Physijs.createMaterial( | |
| new THREE.MeshBasicMaterial({ map: texture }), bwf, bwr | |
| ); | |
| busWheelMaterialsArray.push( busWheelImageMaterial ); //(.materialindex = 1) | |
| }); | |
| //assigns each of the wheel's faces to a .materialindex | |
| var busWheelFaceCount = busWheelGeometry.faces.length; | |
| for ( i=0; i<busWheelFaceCount; i++ ) { | |
| //first set of faces makes up the wheel's tread | |
| if ( i < segments*2 ) { | |
| busWheelGeometry.faces[i].materialIndex = 0; //assigns color material index | |
| //second set of faces makes up the wheel's outside | |
| } else if ( i < segments*3 ) { | |
| busWheelGeometry.faces[i].materialIndex = 1; //assigns image material index | |
| //third set of faces makes up the wheel's inside | |
| } else { | |
| busWheelGeometry.faces[i].materialIndex = 0; //assigns color material index | |
| } | |
| } | |
| //wheel creation & configuration as four physi.js objects | |
| bus.wheel_fl = new Physijs.CylinderMesh( busWheelGeometry, busWheelMaterialsArray, 300 ); | |
| bus.wheel_fr = new Physijs.CylinderMesh( busWheelGeometry, busWheelMaterialsArray, 300 ); | |
| bus.wheel_bl = new Physijs.CylinderMesh( busWheelGeometry, busWheelMaterialsArray, 300 ); | |
| bus.wheel_br = new Physijs.CylinderMesh( busWheelGeometry, busWheelMaterialsArray, 300 ); | |
| if ( bus.platformSide === "platformRight" ) { | |
| var frontX = bfp.x - 9.5; var backX = bfp.x + 9.5 | |
| } else { | |
| var frontX = bfp.x + 9.5; var backX = bfp.x - 9.5 | |
| } | |
| configureWheel( bus.wheel_fl, { x: frontX, y: 2, z: bfp.z + 5 }, "port" ); | |
| configureWheel( bus.wheel_fr, { x: frontX, y: 2, z: bfp.z - 5 }, "starboard" ); | |
| configureWheel( bus.wheel_bl, { x: backX, y: 2, z: bfp.z + 5 }, "port" ); | |
| configureWheel( bus.wheel_br, { x: backX, y: 2, z: bfp.z - 5 }, "starboard" ); | |
| ///wheel constraints | |
| var wheel_fl_constraint = new Physijs.DOFConstraint( bus.wheel_fl, bus.frame, bus.wheel_fl.position ); | |
| var wheel_fr_constraint = new Physijs.DOFConstraint( bus.wheel_fr, bus.frame, bus.wheel_fr.position ); | |
| var wheel_bl_constraint = new Physijs.DOFConstraint( bus.wheel_bl, bus.frame, bus.wheel_bl.position ); | |
| var wheel_br_constraint = new Physijs.DOFConstraint( bus.wheel_br, bus.frame, bus.wheel_br.position ); | |
| bus.wheel_fl_constraint = configureWheelConstraints( wheel_fl_constraint ); | |
| bus.wheel_fr_constraint = configureWheelConstraints( wheel_fr_constraint ); | |
| bus.wheel_bl_constraint = configureWheelConstraints( wheel_bl_constraint ); | |
| bus.wheel_br_constraint = configureWheelConstraints( wheel_br_constraint ); | |
| } | |
| /////---Functions---///// | |
| function playLoadingAnimationIfDocumentNotReady() { | |
| loadingAnimation.style.visibility = "visible"; | |
| document.onreadystatechange = () => { | |
| if (document.readyState === "complete") { | |
| loadingAnimation.style.visibility = "hidden"; | |
| } | |
| } | |
| } | |
| function onWindowResize() { | |
| sceneHeight = window.innerHeight; | |
| sceneWidth = window.innerWidth; | |
| renderer.setSize(sceneWidth, sceneHeight); | |
| camera.aspect = sceneWidth/sceneHeight; | |
| camera.updateProjectionMatrix(); | |
| } | |
| function configureWheel( wheel, position, BusSide ) { | |
| wheel.name = "wheel"; | |
| wheel.componentOf = "bus"; | |
| BusSide === "port" ? wheel.rotation.x = Math.PI / 2 : wheel.rotation.x = -Math.PI / 2; | |
| wheel.position.set( position.x, position.y, position.z ); | |
| wheel.setDamping( 0.5, 0.5 ); | |
| wheel.castShadow = true; | |
| scene.add( wheel ); | |
| } | |
| function configureWheelConstraints( constraint ) { | |
| scene.addConstraint( constraint ); | |
| constraint.setAngularLowerLimit({ x: 0, y: 0, z: 1 }); | |
| constraint.setAngularUpperLimit({ x: 0, y: 0, z: 0 }); | |
| return constraint; | |
| } | |
| function restartGame() { | |
| window.location.reload(); | |
| } | |
| function initializeMatch() { | |
| environment = new Environment(); | |
| busArray = []; | |
| busArray.push( new Bus("platformLeft") ); | |
| busArray.push( new Bus("platformRight") ); | |
| roundActive = true; | |
| } | |
| function displayLoadingAnimation(milliseconds) { | |
| loadingAnimation.style.visibility = "visible"; | |
| setTimeout(function(){ loadingAnimation.style.visibility = "hidden"; }, milliseconds); | |
| } | |
| function pause(milliseconds) { | |
| var then = Date.now(); | |
| var now; | |
| do { now = Date.now() } while ( now - then < milliseconds ); | |
| } | |
| function freezeBuses() { | |
| for ( i=0; i<busArray.count; i++ ) { | |
| busArray[i].frame.mass = 0; | |
| busArray[i].interior.mass = 0; | |
| busArray[i].wheel_fl.mass = busArray[i].wheel_fr.mass = 0; | |
| busArray[i].wheel_bl.mass = busArray[i].wheel_br.mass = 0; | |
| } | |
| } | |
| function restartGame() { | |
| Player1.score = 0; | |
| Player2.score = 0; | |
| var greenScoreEls = document.getElementsByClassName("green_score"); | |
| var redScoreEls = document.getElementsByClassName("red_score"); | |
| for ( i=0; i<2; i++) { | |
| greenScoreEls[i].src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_0of3_green.svg"; | |
| redScoreEls[i].src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_0of3_red.svg"; | |
| }; | |
| $("#game_win_gretchen_page_div").css("visibility", "hidden"); | |
| $("#game_win_bertha_page_div").css("visibility", "hidden"); | |
| initializeMatch(); | |
| } | |
| function aBusHasFallen() { | |
| return ( busArray[0].frame.position.y < -50 || busArray[1].frame.position.y < -50 ) | |
| } | |
| function bothBusesHaveFallen() { | |
| return ( busArray[0].frame.position.y < 0 && busArray[1].frame.position.y < 0 ) | |
| } | |
| function declareMatchDraw() { | |
| $("#round_draw_page_div").css("visibility", "visible"); | |
| } | |
| function declareRoundWin(winner) { | |
| loadingAnimation.style.visibility = "visible"; | |
| var cardEl = document.getElementById("round_win_card"); | |
| cardEl.src = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_round_win_card_${winner.name}.svg`; | |
| var greenScoreEls = document.getElementsByClassName("green_score"); | |
| var redScoreEls = document.getElementsByClassName("red_score"); | |
| for ( i=0; i<2; i++) { | |
| greenScoreEls[i].src = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_${Player1.score}of3_green.svg`; | |
| redScoreEls[i].src = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/bus_${Player2.score}of3_red.svg`; | |
| }; | |
| $("#round_win_page_div").css("visibility", "visible"); | |
| displayLoadingAnimation(1500); | |
| } | |
| function declareGameWin(winner) { | |
| loadingAnimation.style.visibility = "visible"; | |
| if (winner.name === "gretchen") { | |
| $("#game_win_gretchen_page_div").css("visibility", "visible"); | |
| } else { | |
| $("#game_win_bertha_page_div").css("visibility", "visible"); | |
| } | |
| displayLoadingAnimation(1500); | |
| } | |
| function checkForMatchCompletion() { | |
| if ( aBusHasFallen() ) { | |
| freezeBuses(); | |
| pause(1000); | |
| roundActive = false; | |
| if ( bothBusesHaveFallen() ) { | |
| declareMatchDraw(); | |
| } else { | |
| var winner = busArray[0].frame.position.y > 0 ? Player1 : Player2; | |
| winner.score += 1; | |
| if (winner.score < 3) { | |
| declareRoundWin(winner); | |
| } else { | |
| declareGameWin(winner); | |
| } | |
| } | |
| } | |
| } | |
| function handleKeyDown ( keyEvent ) { | |
| // sets wheel motors; configureAngularMotor params are: | |
| // 1) which_motor (as numbers matched to axes: 0 = x, 1 = y, 2 = z) | |
| // 2) low_limit (lower limit of the motor) | |
| // 3) high_limit (upper limit of the motor) | |
| // 4) velocity (target velocity) | |
| // 5) max_force (maximum force the motor can apply) | |
| switch ( keyEvent.keyCode ) { | |
| // BUS 1 | |
| // pivots wheels for steering | |
| case 65: case 37: // "a" key or left arrow key (turn left) | |
| busArray[0].wheel_fr_constraint.configureAngularMotor( 1, -Math.PI / 4, Math.PI / 4, 10, 200 ); | |
| busArray[0].wheel_fr_constraint.enableAngularMotor( 1 ); | |
| busArray[0].wheel_fl_constraint.configureAngularMotor( 1, -Math.PI / 4, Math.PI / 4, 10, 200 ); | |
| busArray[0].wheel_fl_constraint.enableAngularMotor( 1 ); | |
| break; | |
| case 68: case 39: // "d" key or right arrow key (turn right) | |
| busArray[0].wheel_fr_constraint.configureAngularMotor( 1, -Math.PI / 4, Math.PI / 4, -10, 200 ); | |
| busArray[0].wheel_fr_constraint.enableAngularMotor( 1 ); | |
| busArray[0].wheel_fl_constraint.configureAngularMotor( 1, -Math.PI / 4, Math.PI / 4, -10, 200 ); | |
| busArray[0].wheel_fl_constraint.enableAngularMotor( 1 ); | |
| break; | |
| // rotates wheels for propulsion | |
| case 87: case 38: // "w" key or up arrow key (forward) | |
| busArray[0].wheel_bl_constraint.configureAngularMotor( 2, 1, 0, -30, 50000 ); | |
| busArray[0].wheel_bl_constraint.enableAngularMotor( 2 ); | |
| busArray[0].wheel_br_constraint.configureAngularMotor( 2, 1, 0, -30, 50000 ); | |
| busArray[0].wheel_br_constraint.enableAngularMotor( 2 ); | |
| break; | |
| case 83: case 40: // "s" key or down arrow key (backward) | |
| busArray[0].wheel_bl_constraint.configureAngularMotor( 2, 1, 0, 20, 3500 ); | |
| busArray[0].wheel_bl_constraint.enableAngularMotor( 2 ); | |
| busArray[0].wheel_br_constraint.configureAngularMotor( 2, 1, 0, 20, 3500 ); | |
| busArray[0].wheel_br_constraint.enableAngularMotor( 2 ); | |
| break; | |
| // BUS 2 | |
| // pivots wheels for steering | |
| case 76: // "l" key (turn left) | |
| busArray[1].wheel_fr_constraint.configureAngularMotor( 1, -Math.PI / 4, Math.PI / 4, 10, 200 ); | |
| busArray[1].wheel_fr_constraint.enableAngularMotor( 1 ); | |
| busArray[1].wheel_fl_constraint.configureAngularMotor( 1, -Math.PI / 4, Math.PI / 4, 10, 200 ); | |
| busArray[1].wheel_fl_constraint.enableAngularMotor( 1 ); | |
| break; | |
| case 222: // "'" key (turn right) | |
| busArray[1].wheel_fr_constraint.configureAngularMotor( 1, -Math.PI / 4, Math.PI / 4, -10, 200 ); | |
| busArray[1].wheel_fr_constraint.enableAngularMotor( 1 ); | |
| busArray[1].wheel_fl_constraint.configureAngularMotor( 1, -Math.PI / 4, Math.PI / 4, -10, 200 ); | |
| busArray[1].wheel_fl_constraint.enableAngularMotor( 1 ); | |
| break; | |
| // rotates wheels for propulsion | |
| case 80: // "p" key (forward) | |
| busArray[1].wheel_bl_constraint.configureAngularMotor( 2, 1, 0, 30, 50000 ); | |
| busArray[1].wheel_bl_constraint.enableAngularMotor( 2 ); | |
| busArray[1].wheel_br_constraint.configureAngularMotor( 2, 1, 0, 30, 50000 ); | |
| busArray[1].wheel_br_constraint.enableAngularMotor( 2 ); | |
| break; | |
| case 186: // ";" key (backward) | |
| busArray[1].wheel_bl_constraint.configureAngularMotor( 2, 1, 0, -20, 3500 ); | |
| busArray[1].wheel_bl_constraint.enableAngularMotor( 2 ); | |
| busArray[1].wheel_br_constraint.configureAngularMotor( 2, 1, 0, -20, 3500 ); | |
| busArray[1].wheel_br_constraint.enableAngularMotor( 2 ); | |
| break; | |
| } | |
| } | |
| function handleKeyUp(keyEvent){ | |
| switch( keyEvent.keyCode ) { | |
| // BUS 1 | |
| //sets front wheels straight again | |
| case 65: case 68: case 37: case 39: | |
| busArray[0].wheel_fr_constraint.configureAngularMotor( 1, 0, 0, 10, 200 ); | |
| busArray[0].wheel_fr_constraint.enableAngularMotor( 1 ); | |
| busArray[0].wheel_fl_constraint.configureAngularMotor( 1, 0, 0, 10, 200 ); | |
| busArray[0].wheel_fl_constraint.enableAngularMotor( 1 ); | |
| break; | |
| //stops back wheel rotation | |
| case 87: case 83: case 38: case 40: | |
| busArray[0].wheel_bl_constraint.configureAngularMotor( 2, 0, 0, 0, 2000 ); | |
| busArray[0].wheel_bl_constraint.enableAngularMotor( 2 ); | |
| busArray[0].wheel_br_constraint.configureAngularMotor( 2, 0, 0, 0, 2000 ); | |
| busArray[0].wheel_br_constraint.enableAngularMotor( 2 ); | |
| break; | |
| // BUS 2 | |
| //sets front wheels straight again | |
| case 76: case 222: | |
| busArray[1].wheel_fr_constraint.configureAngularMotor( 1, 0, 0, 10, 200 ); | |
| busArray[1].wheel_fr_constraint.enableAngularMotor( 1 ); | |
| busArray[1].wheel_fl_constraint.configureAngularMotor( 1, 0, 0, 10, 200 ); | |
| busArray[1].wheel_fl_constraint.enableAngularMotor( 1 ); | |
| break; | |
| //stops back wheel rotation | |
| case 80: case 186: | |
| busArray[1].wheel_bl_constraint.configureAngularMotor( 2, 0, 0, 0, 2000 ); | |
| busArray[1].wheel_bl_constraint.enableAngularMotor( 2 ); | |
| busArray[1].wheel_br_constraint.configureAngularMotor( 2, 0, 0, 0, 2000 ); | |
| busArray[1].wheel_br_constraint.enableAngularMotor( 2 ); | |
| break; | |
| } | |
| } | |
| /////---Interaction---///// | |
| window.addEventListener("resize", onWindowResize, false); | |
| document.onkeydown = handleKeyDown; | |
| document.onkeyup = handleKeyUp; | |
| $("#button_play").click(function(){ | |
| displayLoadingAnimation(1500); | |
| $("#landing_page_div").hide(); | |
| initializeMatch(); | |
| }); | |
| $("#button_restart").click(function(){ | |
| displayLoadingAnimation(1500); | |
| restartGame() | |
| }); | |
| $("#button_draw").click(function(){ | |
| declareMatchDraw(); | |
| }); | |
| $("#button_play_next_round").click(function(){ | |
| displayLoadingAnimation(1500); | |
| $("#round_win_page_div").css("visibility", "hidden"); | |
| initializeMatch(); | |
| }); | |
| $("#button_replay_round").click(function(){ | |
| displayLoadingAnimation(1500); | |
| $("#round_draw_page_div").css("visibility", "hidden"); | |
| initializeMatch(); | |
| }); | |
| $(".button_new_game").click(function(){ | |
| displayLoadingAnimation(1500); | |
| restartGame(); | |
| }); | |
| /////---Display---///// | |
| initializeMatch(); | |
| //playLoadingAnimationIfDocumentNotReady(); | |
| function render() { | |
| if ( roundActive === true ) { checkForMatchCompletion(); } | |
| scene.simulate(); | |
| camera.lookAt( 0, 1, 0 ); | |
| //camera.lookAt( busArray[0].frame.position ); | |
| camera.updateProjectionMatrix(); | |
| renderer.render( scene, camera); | |
| requestAnimationFrame( render ); | |
| }; | |
| render(); |
| body { | |
| margin: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| canvas { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .display_page { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| background: #F6EDD0; | |
| box-shadow: 0 0 120px 5px #514014 inset; | |
| z-index: 1; | |
| } | |
| /* Loading Animation */ | |
| #loading_animation_page { | |
| visibility: hidden; | |
| z-index: 2; | |
| } | |
| #loading_animation_div { | |
| width: 25%; | |
| height: 25%; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| #loading_animation_svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .loading_animation_lines { | |
| stroke: #272727; | |
| stroke-width: 1%; | |
| stroke-linecap: round; | |
| animation-name: fade_out_in; | |
| animation-iteration-count: infinite; | |
| animation-duration: 900ms; | |
| animation-timing-function: linear; | |
| } | |
| #loading_animation_line_1 { animation-delay: 0ms; } | |
| #loading_animation_line_2 { animation-delay: 175ms; } | |
| #loading_animation_line_3 { animation-delay: 350ms; } | |
| @keyframes fade_out_in { | |
| 0% { opacity: 1 } | |
| 20% { opacity: 0 } | |
| 100% { opacity: 1 } | |
| } | |
| #loading_animation_insignia { | |
| position: absolute; | |
| width: 22%; | |
| height: 22%; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| /* Landing Page */ | |
| #landing_page_div { | |
| background: #F9F9F9; | |
| } | |
| #landing_logo_div { | |
| position: absolute; | |
| width: 50%; | |
| top: 37%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| #logo_landing { | |
| width: 100%; | |
| } | |
| #button_play { | |
| position: absolute; | |
| width: 20%; | |
| top: 140%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| opacity: .9; | |
| } | |
| #button_play:hover { | |
| opacity: 1; | |
| cursor: pointer; | |
| } | |
| /* Announcement Pages */ | |
| .announcement_page { | |
| visibility: hidden; | |
| } | |
| .card_div { | |
| position: absolute; | |
| width: 60%; | |
| top: 48%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .card { | |
| width: 100%; | |
| } | |
| .card_button { | |
| position: absolute; | |
| width: 30%; | |
| top: 95.5%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| opacity: .9; | |
| } | |
| .card_button:hover { opacity: 1 } | |
| .round_score { | |
| position: absolute; | |
| height: 8%; | |
| top: 66%; | |
| transform: translate(-50%, -50%); | |
| } | |
| #round_score_green { left: 38%; } | |
| #round_score_red { left: 80%; } | |
| /* UI */ | |
| #logo_div { | |
| position: fixed; | |
| width: 23%; | |
| min-width: 115px; | |
| max-width: 220px; | |
| top: 6%; | |
| left: 4%; | |
| opacity: .8; | |
| } | |
| #logo { | |
| width: 100%; | |
| } | |
| #copyright { | |
| position: absolute; | |
| bottom: -5%; | |
| left: 50%; | |
| transform: translate(-50%); | |
| width: 22%; | |
| } | |
| #scoreboard_div { | |
| position: fixed; | |
| width: 16%; | |
| max-width: 160px; | |
| min-width: 90px; | |
| top: 6%; | |
| right: 4%; | |
| opacity: .8; | |
| } | |
| #scoreboard_img { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .board_score { | |
| position: absolute; | |
| height: 35%; | |
| left: 76%; | |
| } | |
| #board_score_green { top: -1.5%; } | |
| #board_score_red { top: 60%; } | |
| #buttons_div { | |
| position: fixed; | |
| width: 35px; | |
| height: 80px; | |
| top: 47%; | |
| transform: translate(0, -50%); | |
| right: 4%; | |
| } | |
| .buttons_items { | |
| position: absolute; | |
| width: 100%; | |
| opacity: .7; | |
| } | |
| .button_restart { | |
| height: 33.333%; | |
| top: 0; | |
| } | |
| .button_divider { | |
| height: 33.333%; | |
| width: 70%; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| opacity: .5; | |
| } | |
| .button_draw { | |
| height: 33.333%; | |
| bottom: 0; | |
| } | |
| .button_restart:hover { opacity: 1; } | |
| .button_draw:hover { opacity: 1; } | |
| .nav { | |
| position: fixed; | |
| width: 12%; | |
| max-width: 125px; | |
| min-width: 75px; | |
| bottom: 5%; | |
| opacity: .85; | |
| } | |
| .left_nav { left: 4%; } | |
| .right_nav { right: 4%; } |
