PixAnvil Graphics Demo

Setup
Animate
Save

// Make a bunch of spheres
var g=new THREE.SphereGeometry(0.5, 8, 6);
var m=new THREE.MeshLambertMaterial(
    {color: 0xffffff})
sim.nspheres=50;
sim.spheres=[];
for (var i=0;i<sim.nspheres;i++) {
  var s=new THREE.Mesh(g,m);
  s.position.set(0,0,0);
  s.V=new vec3(+20.0*Math.random(),Math.random(),+15.0*Math.random());
  s.V.multiplyScalar(10.0);
  s.P=new vec3(-3.0,0,0);
  s.castShadow=true;
  s.receiveShadow=true;
  scene.add(s); // so it gets rendered
  sim.spheres[i]=s; // so we can animate it
}

// Ground
sim.ground = new THREE.Mesh(
  new THREE.CubeGeometry(20,20,2),
  new THREE.MeshLambertMaterial(
    {color: 0xff6622, opacity: 1})
);
sim.ground.position.z=-1.5; /* puts top edge at z=-0.5 */
sim.ground.receiveShadow=true;
scene.add(sim.ground);

// Sun-like spotlight
var l=new THREE.SpotLight();
sim.light = l;
l.position.set( -10, -20, 20 );
l.castShadow=true;
l.shadowCameraNear = 1; 
l.shadowCameraFar = 100; 
l.shadowCameraFov = 45; 
scene.add(l);

camera.lookAt(scene.position);

/**
  s: sphere object, with s.P position and s.V velocity.
  N: surface normal, facing out of region.
  P: point on surface of boundary region.
*/
function boundaryBounce(s,N,P) {
  N.normalize();
  var rP=s.P.clone().subSelf(P); // sphere position, relative to boundary
  var d=rP.dot(N);
  if (d>0.0) { // we hit the boundary
    s.P.addSelf(N.clone().multiplyScalar(-d)); // move inside
    var dV=s.V.dot(N); 
    if (dV>0.0) { // flip velocity
      s.V.addSelf(N.clone().multiplyScalar(-2.0*dV ));
    }
    s.V.multiplyScalar(0.6); // bounce friction (inelastic)
    if (dV>0.3) { // CLANG! the camera
      camera.position.addSelf(N.clone().multiplyScalar(-dV*0.0005)); 
    }
  }
}

var dt=0.1*lib.dt; // 10% of realtime.

camera.position.set(0,-10,1.7); // default: assume no "clang!".
for (var i=0;i<sim.nspheres;i++) {
  var s=sim.spheres[i];
  var A=new vec3(0,0,-9.8);
  s.V.addSelf(A.clone().multiplyScalar(dt));
  s.P.addSelf(s.V.clone().multiplyScalar(dt));

var C=new vec3(0,0,1); // center of boundary sphere
  var r=3.0; // radius in meters
  var N=s.P.clone().subSelf(C).normalize(); // outward-facing normal
  var P=N.clone().multiplyScalar(r).addSelf(C); // point on sphere

boundaryBounce(s,N,P); // bounce off closest part of sphere

boundaryBounce(s,new vec3(0,0,-1),new vec3()); // still enforce ground

s.position=s.P; // copy to 3D display
}

To save, copy into a plain text editor like Notepad.

PixAnvil/Three.js demo