Attempting to rewrite a Physi.js example in my own style has been challenging. The gravity feature doesn't seem to be working properly, even though the render loop is functioning correctly and constantly firing.
You can view what I have so far here:
The original Physi.js example can be found here:
Below is the code snippet that I am currently working with:
var ground = {},
box = {},
boxes = [],
ground = {},
projector,
renderer,
scene,
light,
camera,
render,
gravity;
// Set up Physijs configurations
Physijs.scripts.worker = 'physi.js_worker.js';
Physijs.scripts.ammo = 'ammo.js';
// Initialize Projector
projector = new THREE.Projector;
// Configure Renderer
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize( 1000, 600 );
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
// Create Scene
scene = new Physijs.Scene;
// Setup Camera
camera = new THREE.PerspectiveCamera( 35, ( 1000 / 600 ), 1, 1000 );
camera.position.set( 60, 50, 60 );
camera.lookAt( scene.position );
scene.add( camera );
// Add Lighting
light = new THREE.DirectionalLight( 0xFFFFFF );
light.position.set( 20, 40, -15 );
light.target.position.copy( scene.position );
light.castShadow = true;
light.shadowCameraLeft = -60;
light.shadowCameraTop = -60;
light.shadowCameraRight = 60;
light.shadowCameraBottom = 60;
light.shadowCameraNear = 20;
light.shadowCameraFar = 200;
light.shadowBias = -0.0001;
light.shadowMapWidth = light.shadowMapHeight = 2048;
light.shadowDarkness = 0.7;
scene.add( light );
// Define Ground Properties
ground.material = new THREE.MeshLambertMaterial({
color: 0xDDDDDD
});
ground.material = Physijs.createMaterial( ground.material, 0.8, 0.4 );
ground.geometry = new THREE.CubeGeometry( 100, 1, 100 );
ground.mesh = new Physijs.BoxMesh( ground.geometry, ground.material, 0 );
ground.mesh.receiveShadow = true;
scene.add( ground.mesh );
// Define Box Properties
box.material = new THREE.MeshLambertMaterial({
color: 0x00FF00
});
box.material = Physijs.createMaterial( box.material, 0.4, 0.6 );
box.geometry = new THREE.CubeGeometry( 4, 4, 4 );
// Create and position 10 boxes
for( var i = 0; i < 10; i++ ){
var pos = {},
rot = {};
pos.x = Math.random() * 50 - 25;
pos.y = 10 + Math.random() * 5;
pos.z = Math.random() * 50 - 25;
rot.x = Math.random() * Math.PI * 2;
rot.y = Math.random() * Math.PI * 2;
rot.z = Math.random() * Math.PI * 2;
box.mesh = new Physijs.BoxMesh( box.geometry, box.material );
box.mesh.position.set( pos.x, pos.y, pos.z );
box.mesh.rotation.set( rot.x, rot.y, rot.z );
box.mesh.castShadow = true;
scene.add( box.mesh );
boxes.push( box.mesh );
};
// Rendering method
render = function(){
scene.simulate( null, 50 );
renderer.render( scene, camera );
requestAnimationFrame( render );
};
// Initiate rendering
$( function(){
$('#viewport').append( renderer.domElement );
render();
});