Last active
August 3, 2020 15:20
-
-
Save BlueMagnificent/51839986962556c614f617016618a64c to your computer and use it in GitHub Desktop.
Javascript 3D Physics Tut 3 contact test
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>Collision 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 = [], pos = new THREE.Vector3(), tmpTrans = null; | |
let ball, moveDirection = { left: 0, right: 0, forward: 0, back: 0, up: 0, down: 0 }; | |
const STATE = { DISABLE_DEACTIVATION : 4 }; | |
//Ammojs Initialization | |
Ammo().then(start) | |
function start (){ | |
tmpTrans = new Ammo.btTransform(); | |
setupPhysicsWorld(); | |
setupGraphics(); | |
createFloorTiles(); | |
createBall(); | |
setupEventHandlers(); | |
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( 0xabfeff ); | |
//create camera | |
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 5000 ); | |
camera.position.set( 0, 80, 40 ); | |
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(); | |
moveBall(); | |
updatePhysics( deltaTime ); | |
renderer.render( scene, camera ); | |
requestAnimationFrame( renderFrame ); | |
} | |
function setupEventHandlers(){ | |
window.addEventListener( 'resize', onWindowResize, false ); | |
window.addEventListener( 'keydown', handleKeyDown, false); | |
window.addEventListener( 'keyup', handleKeyUp, false); | |
} | |
function onWindowResize() { | |
camera.aspect = window.innerWidth / window.innerHeight; | |
camera.updateProjectionMatrix(); | |
renderer.setSize( window.innerWidth, window.innerHeight ); | |
} | |
function handleKeyDown(event){ | |
let keyCode = event.keyCode; | |
switch(keyCode){ | |
case 87: //W: FORWARD | |
moveDirection.forward = 1; | |
break; | |
case 83: //S: BACK | |
moveDirection.back = 1; | |
break; | |
case 65: //A: LEFT | |
moveDirection.left = 1; | |
break; | |
case 68: //D: RIGHT | |
moveDirection.right = 1; | |
break; | |
case 84://T | |
checkContact(); | |
break; | |
} | |
} | |
function handleKeyUp(event){ | |
let keyCode = event.keyCode; | |
switch(keyCode){ | |
case 87: //W: FORWARD | |
moveDirection.forward = 0; | |
break; | |
case 83: //S: BACK | |
moveDirection.back = 0; | |
break; | |
case 65: //A: LEFT | |
moveDirection.left = 0; | |
break; | |
case 68: //D: RIGHT | |
moveDirection.right = 0; | |
break; | |
} | |
} | |
function createFloorTiles(){ | |
let tiles = [ | |
{ name: "yellow", color: 0xFFFF00, pos: {x: -20, y: 0, z: 20} }, | |
{ name: "red", color: 0xFF0000, pos: {x: 20, y: 0, z: 20} }, | |
{ name: "green", color: 0x008000, pos: {x: 20, y: 0, z: -20} }, | |
{ name: "blue", color: 0x0000FF, pos: {x: -20, y: 0, z: -20} } | |
] | |
let scale = {x: 40, y: 6, z: 40}; | |
let quat = {x: 0, y: 0, z: 0, w: 1}; | |
let mass = 0; | |
for (const tile of tiles) { | |
//threeJS Section | |
let pos = tile.pos; | |
let mesh = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshPhongMaterial({color: tile.color})); | |
mesh.position.set(pos.x, pos.y, pos.z); | |
mesh.scale.set(scale.x, scale.y, scale.z); | |
mesh.castShadow = true; | |
mesh.receiveShadow = true; | |
mesh.userData.tag = tile.name; | |
scene.add(mesh); | |
//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 ); | |
body.setFriction(4); | |
body.setRollingFriction(10); | |
physicsWorld.addRigidBody( body ); | |
body.threeObject = mesh; | |
} | |
} | |
function createBall(){ | |
let pos = {x: 0, y: 10, z: 0}; | |
let radius = 1.5; | |
let quat = {x: 0, y: 0, z: 0, w: 1}; | |
let mass = 1; | |
//threeJS Section | |
ball = ballObject = new THREE.Mesh(new THREE.SphereBufferGeometry(radius), new THREE.MeshPhongMaterial({color: 0x800080})); | |
ball.position.set(pos.x, pos.y, pos.z); | |
ball.castShadow = true; | |
ball.receiveShadow = true; | |
ball.userData.tag = "ball"; | |
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 ); | |
body.setFriction(4); | |
body.setRollingFriction(10); | |
body.setActivationState( STATE.DISABLE_DEACTIVATION ) | |
physicsWorld.addRigidBody( body ); | |
rigidBodies.push(ball); | |
ball.userData.physicsBody = body; | |
body.threeObject = ball; | |
} | |
function moveBall(){ | |
let scalingFactor = 20; | |
let moveX = moveDirection.right - moveDirection.left; | |
let moveZ = moveDirection.back - moveDirection.forward; | |
if( moveX == 0 && moveZ == 0) return; | |
let resultantImpulse = new Ammo.btVector3( moveX, 0, moveZ ) | |
resultantImpulse.op_mul(scalingFactor); | |
let physicsBody = ball.userData.physicsBody; | |
physicsBody.setLinearVelocity( resultantImpulse ); | |
} | |
function checkContact(){ | |
} | |
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