Created
April 3, 2019 08:31
-
-
Save BlueMagnificent/6ef76c65839a3d952228ba2f99d9b1e7 to your computer and use it in GitHub Desktop.
Javascript 3D Physics Snippet Five
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>JS 3D Physics</title> | |
<style> | |
body { margin: 0; } | |
</style> | |
</head> | |
<body> | |
<script src="js/three.js"></script> | |
<script src="js/ammo.js"></script> | |
<script> | |
//variable declaration section | |
let physicsWorld, scene, camera, renderer, rigidBodies = []; | |
let colGroupPlane = 1, colGroupRedBall = 2, colGroupGreenBall = 4 | |
//Ammojs Initialization | |
Ammo().then(start) | |
function start (){ | |
tmpTrans = new Ammo.btTransform(); | |
setupPhysicsWorld(); | |
setupGraphics(); | |
createBlock(); | |
createBall(); | |
createMaskBall(); | |
createJointObjects(); | |
renderFrame(); | |
} | |
function setupPhysicsWorld(){ | |
let collisionConfiguration = new Ammo.btDefaultCollisionConfiguration(), | |
dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration), | |
overlappingPairCache = new Ammo.btDbvtBroadphase(), | |
solver = new Ammo.btSequentialImpulseConstraintSolver(); | |
physicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache, solver, collisionConfiguration); | |
physicsWorld.setGravity(new Ammo.btVector3(0, -10, 0)); | |
} | |
function setupGraphics(){ | |
//create clock for timing | |
clock = new THREE.Clock(); | |
//create the scene | |
scene = new THREE.Scene(); | |
scene.background = new THREE.Color( 0xbfd1e5 ); | |
//create camera | |
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 5000 ); | |
camera.position.set( 0, 30, 70 ); | |
camera.lookAt(new THREE.Vector3(0, 0, 0)); | |
//Add hemisphere light | |
let hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.1 ); | |
hemiLight.color.setHSL( 0.6, 0.6, 0.6 ); | |
hemiLight.groundColor.setHSL( 0.1, 1, 0.4 ); | |
hemiLight.position.set( 0, 50, 0 ); | |
scene.add( hemiLight ); | |
//Add directional light | |
let dirLight = new THREE.DirectionalLight( 0xffffff , 1); | |
dirLight.color.setHSL( 0.1, 1, 0.95 ); | |
dirLight.position.set( -1, 1.75, 1 ); | |
dirLight.position.multiplyScalar( 100 ); | |
scene.add( dirLight ); | |
dirLight.castShadow = true; | |
dirLight.shadow.mapSize.width = 2048; | |
dirLight.shadow.mapSize.height = 2048; | |
let d = 50; | |
dirLight.shadow.camera.left = -d; | |
dirLight.shadow.camera.right = d; | |
dirLight.shadow.camera.top = d; | |
dirLight.shadow.camera.bottom = -d; | |
dirLight.shadow.camera.far = 13500; | |
//Setup the renderer | |
renderer = new THREE.WebGLRenderer( { antialias: true } ); | |
renderer.setClearColor( 0xbfd1e5 ); | |
renderer.setPixelRatio( window.devicePixelRatio ); | |
renderer.setSize( window.innerWidth, window.innerHeight ); | |
document.body.appendChild( renderer.domElement ); | |
renderer.gammaInput = true; | |
renderer.gammaOutput = true; | |
renderer.shadowMap.enabled = true; | |
} | |
function renderFrame(){ | |
let deltaTime = clock.getDelta(); | |
updatePhysics( deltaTime ); | |
renderer.render( scene, camera ); | |
requestAnimationFrame( renderFrame ); | |
} | |
function createBlock(){ | |
let pos = {x: 0, y: 0, z: 0}; | |
let scale = {x: 50, y: 2, z: 50}; | |
let quat = {x: 0, y: 0, z: 0, w: 1}; | |
let mass = 0; | |
//threeJS Section | |
let blockPlane = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshPhongMaterial({color: 0xa0afa4})); | |
blockPlane.position.set(pos.x, pos.y, pos.z); | |
blockPlane.scale.set(scale.x, scale.y, scale.z); | |
blockPlane.castShadow = true; | |
blockPlane.receiveShadow = true; | |
scene.add(blockPlane); | |
//Ammojs Section | |
let transform = new Ammo.btTransform(); | |
transform.setIdentity(); | |
transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) ); | |
transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) ); | |
let motionState = new Ammo.btDefaultMotionState( transform ); | |
let colShape = new Ammo.btBoxShape( new Ammo.btVector3( scale.x * 0.5, scale.y * 0.5, scale.z * 0.5 ) ); | |
colShape.setMargin( 0.05 ); | |
let localInertia = new Ammo.btVector3( 0, 0, 0 ); | |
colShape.calculateLocalInertia( mass, localInertia ); | |
let rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, colShape, localInertia ); | |
let body = new Ammo.btRigidBody( rbInfo ); | |
physicsWorld.addRigidBody( body, colGroupPlane, colGroupRedBall ); | |
} | |
function createBall(){ | |
let pos = {x: 0, y: 20, z: 0}; | |
let radius = 2; | |
let quat = {x: 0, y: 0, z: 0, w: 1}; | |
let mass = 1; | |
//threeJS Section | |
let ball = new THREE.Mesh(new THREE.SphereBufferGeometry(radius), new THREE.MeshPhongMaterial({color: 0xff0505})); | |
ball.position.set(pos.x, pos.y, pos.z); | |
ball.castShadow = true; | |
ball.receiveShadow = true; | |
scene.add(ball); | |
//Ammojs Section | |
let transform = new Ammo.btTransform(); | |
transform.setIdentity(); | |
transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) ); | |
transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) ); | |
let motionState = new Ammo.btDefaultMotionState( transform ); | |
let colShape = new Ammo.btSphereShape( radius ); | |
colShape.setMargin( 0.05 ); | |
let localInertia = new Ammo.btVector3( 0, 0, 0 ); | |
colShape.calculateLocalInertia( mass, localInertia ); | |
let rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, colShape, localInertia ); | |
let body = new Ammo.btRigidBody( rbInfo ); | |
physicsWorld.addRigidBody( body, colGroupRedBall, colGroupPlane | colGroupGreenBall ); | |
ball.userData.physicsBody = body; | |
rigidBodies.push(ball); | |
} | |
function createMaskBall(){ | |
let pos = {x: 1, y: 30, z: 0}; | |
let radius = 2; | |
let quat = {x: 0, y: 0, z: 0, w: 1}; | |
let mass = 1; | |
//threeJS Section | |
let ball = new THREE.Mesh(new THREE.SphereBufferGeometry(radius), new THREE.MeshPhongMaterial({color: 0x00ff08})); | |
ball.position.set(pos.x, pos.y, pos.z); | |
ball.castShadow = true; | |
ball.receiveShadow = true; | |
scene.add(ball); | |
//Ammojs Section | |
let transform = new Ammo.btTransform(); | |
transform.setIdentity(); | |
transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) ); | |
transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) ); | |
let motionState = new Ammo.btDefaultMotionState( transform ); | |
let colShape = new Ammo.btSphereShape( radius ); | |
colShape.setMargin( 0.05 ); | |
let localInertia = new Ammo.btVector3( 0, 0, 0 ); | |
colShape.calculateLocalInertia( mass, localInertia ); | |
let rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, colShape, localInertia ); | |
let body = new Ammo.btRigidBody( rbInfo ); | |
physicsWorld.addRigidBody( body, colGroupGreenBall, colGroupRedBall); | |
ball.userData.physicsBody = body; | |
rigidBodies.push(ball); | |
} | |
function createJointObjects(){ | |
let pos1 = {x: -1, y: 15, z: 0}; | |
let pos2 = {x: -1, y: 10, z: 0}; | |
let radius = 2; | |
let scale = {x: 5, y: 2, z: 2}; | |
let quat = {x: 0, y: 0, z: 0, w: 1}; | |
let mass1 = 0; | |
let mass2 = 1; | |
let transform = new Ammo.btTransform(); | |
//Sphere Graphics | |
let ball = new THREE.Mesh(new THREE.SphereBufferGeometry(radius), new THREE.MeshPhongMaterial({color: 0xb846db})); | |
ball.position.set(pos1.x, pos1.y, pos1.z); | |
ball.castShadow = true; | |
ball.receiveShadow = true; | |
scene.add(ball); | |
//Sphere Physics | |
transform.setIdentity(); | |
transform.setOrigin( new Ammo.btVector3( pos1.x, pos1.y, pos1.z ) ); | |
transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) ); | |
let motionState = new Ammo.btDefaultMotionState( transform ); | |
let sphereColShape = new Ammo.btSphereShape( radius ); | |
sphereColShape.setMargin( 0.05 ); | |
let localInertia = new Ammo.btVector3( 0, 0, 0 ); | |
sphereColShape.calculateLocalInertia( mass1, localInertia ); | |
let rbInfo = new Ammo.btRigidBodyConstructionInfo( mass1, motionState, sphereColShape, localInertia ); | |
let sphereBody = new Ammo.btRigidBody( rbInfo ); | |
physicsWorld.addRigidBody( sphereBody, colGroupGreenBall, colGroupRedBall ); | |
ball.userData.physicsBody = sphereBody; | |
rigidBodies.push(ball); | |
//Block Graphics | |
let block = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshPhongMaterial({color: 0xf78a1d})); | |
block.position.set(pos2.x, pos2.y, pos2.z); | |
block.scale.set(scale.x, scale.y, scale.z); | |
block.castShadow = true; | |
block.receiveShadow = true; | |
scene.add(block); | |
//Block Physics | |
transform.setIdentity(); | |
transform.setOrigin( new Ammo.btVector3( pos2.x, pos2.y, pos2.z ) ); | |
transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) ); | |
motionState = new Ammo.btDefaultMotionState( transform ); | |
let blockColShape = new Ammo.btBoxShape( new Ammo.btVector3( scale.x * 0.5, scale.y * 0.5, scale.z * 0.5 ) ); | |
blockColShape.setMargin( 0.05 ); | |
localInertia = new Ammo.btVector3( 0, 0, 0 ); | |
blockColShape.calculateLocalInertia( mass2, localInertia ); | |
rbInfo = new Ammo.btRigidBodyConstructionInfo( mass2, motionState, blockColShape, localInertia ); | |
let blockBody = new Ammo.btRigidBody( rbInfo ); | |
physicsWorld.addRigidBody( blockBody, colGroupGreenBall, colGroupRedBall ); | |
block.userData.physicsBody = blockBody; | |
rigidBodies.push(block); | |
//Create Joints | |
let spherePivot = new Ammo.btVector3( 0, - radius, 0 ); | |
let blockPivot = new Ammo.btVector3( - scale.x * 0.5, 1, 1 ); | |
let p2p = new Ammo.btPoint2PointConstraint( sphereBody, blockBody, spherePivot, blockPivot); | |
physicsWorld.addConstraint( p2p, false ); | |
} | |
function updatePhysics( deltaTime ){ | |
// Step world | |
physicsWorld.stepSimulation( deltaTime, 10 ); | |
// Update rigid bodies | |
for ( let i = 0; i < rigidBodies.length; i++ ) { | |
let objThree = rigidBodies[ i ]; | |
let objAmmo = objThree.userData.physicsBody; | |
let ms = objAmmo.getMotionState(); | |
if ( ms ) { | |
ms.getWorldTransform( tmpTrans ); | |
let p = tmpTrans.getOrigin(); | |
let q = tmpTrans.getRotation(); | |
objThree.position.set( p.x(), p.y(), p.z() ); | |
objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() ); | |
} | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment