odejs
Version:
3D physics engine
165 lines (149 loc) • 5.36 kB
HTML
<html>
<head>
<meta charset=utf-8>
<title>ODE.js - boxstack</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
.help {
font-family: Monospace;
color: #fff;
font-size: 2em;
position: absolute;
width: 100%;
bottom : 30px;
left: 0px;
text-align: center;
z-index: 100;
}
</style>
</head>
<body>
<span class="help">To drop object press any key</span>
<script src="http://ricku34.github.io/ShaderElement/build/three.r74.min.js"></script>
<script src="../lib/libode.js"></script>
<script>
ODE.readyPromise.then(function() {
var world = new ODE.World();
var space = new ODE.Space.Hash();
var contactgroup = new ODE.Joint.Group(10000);
world.setGravity (0,-9.81,0);
space.createPlane(0,1,0,0);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var ambientLight = new THREE.AmbientLight( 0x000000 );
scene.add( ambientLight );
var lights = [];
lights[0] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[0].position.set( 0, 200, 0 );
lights[1].position.set( 100, 200, 100 );
lights[2].position.set( -100, -200, -100 );
scene.add( lights[0] );
scene.add( lights[1] );
scene.add( lights[2] );
var texture = new THREE.TextureLoader().load( 'assets/pinmarb2.png' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
var geometry = new THREE.PlaneGeometry( 500, 500, 100, 100 );
geometry.faceVertexUvs[0].forEach(function(UVs)
{
UVs[0].multiplyScalar(100)
UVs[1].multiplyScalar(100)
UVs[2].multiplyScalar(100)
})
var material = new THREE.MeshBasicMaterial( {map: texture} );
var plane = new THREE.Mesh( geometry, material );
plane.rotation.x = -Math.PI/2;
scene.add( plane );
var OBJECTS = [];
camera.position.z = 25;
camera.position.y = 10;
var render = function () {
requestAnimationFrame( render );
space.collide(function(g1,g2)
{
var b1 = g1.getBody();
var b2 = g2.getBody();
if (b1 && b2 && ODE.Body.areConnected (b1,b2))
return;
ODE.Geom.collide(g1,g2,3,function(contact)
{
contact.surface.mode = ODE.Contact.Mode.Bounce;
contact.surface.mu = 250;
contact.surface.bounce = 0.3;
contact.surface.bounce_vel = 0.05;
var c = world.createContactJoint(contactgroup,contact);
c.attach(b1,b2);
});
})
world.step(0.05);
contactgroup.empty(contactgroup);
OBJECTS.forEach(function(mesh)
{
mesh.position.set.apply(mesh.position,mesh.body.getPosition())
var q = mesh.body.getQuaternion().getArray();
mesh.quaternion.set(q[1],q[2],q[3],q[0]);
})
renderer.render(scene, camera);
};
window.addEventListener( 'resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
document.addEventListener('keypress',
function( evt )
{
if(evt.keyCode==0 && evt.key==" ");
{
var t = Math.round(Math.random()*1)
switch(t)
{
case 1 :
var lx=2 + Math.random()*4,ly=1 + Math.random()*5,lz=1 + Math.random()*3;
var geometry = new THREE.BoxGeometry( lx, ly, lz );
var material = new THREE.MeshPhongMaterial( {color: new THREE.Color( Math.random(), Math.random(), Math.random() )} );
var mesh = new THREE.Mesh( geometry, material );
mesh.body = world.createBody();
mesh.body.setPosition((Math.random()*2-1)*5,20,(Math.random()*2-1)*5);
mesh.body.getQuaternion().fromAxisAndAngle(Math.random()*2.0-1.0,Math.random()*2.0-1.0,Math.random()*2.0-1.0,Math.random()*10.0-5.0);
var mass = new ODE.Mass();
mass.setBox(5,lx, ly, lz);
mass.adjust (1);
mesh.body.setMass(mass);
mass.destroy();
mesh.odegeom = space.createBox(lx, ly, lz);
mesh.odegeom.setBody(mesh.body);
scene.add( mesh );OBJECTS.push(mesh);
break;
default :
var radius = 1 + Math.random()*3;
var geometry = new THREE.SphereGeometry( radius, 32, 32 );
var material = new THREE.MeshPhongMaterial( {color: new THREE.Color( Math.random(), Math.random(), Math.random() )} );
var mesh = new THREE.Mesh( geometry, material );
mesh.body = world.createBody();
mesh.body.setPosition ((Math.random()*2-1)*5,20,(Math.random()*2-1)*5);
mesh.body.getQuaternion().fromAxisAndAngle(Math.random()*2.0-1.0,Math.random()*2.0-1.0,Math.random()*2.0-1.0,Math.random()*10.0-5.0);
var mass = new ODE.Mass();
mass.setSphere(5,radius);
mass.adjust (1);
mesh.body.setMass(mass);
mass.destroy();
mesh.odegeom = space.createSphere(radius);
mesh.odegeom.setBody(mesh.body);
scene.add( mesh );OBJECTS.push(mesh);
break;
}
}
}, false);
render();
});
</script>
</body>
</html>