Particle/Plane classes

by jmcjc5u

HTML

<div id="info">particle prototype
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

class Particle {
	constructor (mesh) {
  	this.pos = new THREE.Vector3()
    this.vel = new THREE.Vector3()
    this.force = new THREE.Vector3(0,-10,0)
    this.mesh = mesh;
    scene.add (mesh)
  }
  
  update (dt) {
		this.vel.add (this.force.clone().multiplyScalar (dt))
  	this.pos.add (this.vel.clone().multiplyScalar(dt))

		// collision with planes
    this.collidingPlanes (planes);
    
		this.mesh.position.copy (this.pos)
  }
  
	collidingPlanes (planes) {
    const EPS = 1e-3
    const CR = 0.96
  	for (let i = 0; i < planes.length; i++) {
			let plane = planes[i]
			let point = this.pos.clone().sub (plane.ptOnPl)
      if ( point.dot(plane.normal) < EPS ) {
				// position correction
      	this.pos.copy (plane.ptOnPl.clone().add (point.projectOnPlane(plane.normal)) )
      	// velocity update
      	this.vel.sub (plane.normal.clone().multiplyScalar ((1+CR)*this.vel.dot(plane.normal)))
      	return;  // assume particle collides with AT MOST one plane
      }
  	}
  }

}

class Plane {
	constructor (localPointOnPlane, localNormal, mesh) {
    this.localPtOnPl = localPointOnPlane.clone();
		this.localNormal = localNormal.clone();
    this.mesh = mesh;  // the graphics representation
  }
  update () {
  	this.mesh.updateMatrixWorld() // important!
  	this.ptOnPl = this.mesh.localToWorld (this.localPtOnPl.clone());
    let normalMat = new THREE.Matrix3().getNormalMatrix (this.mesh.matrixWorld);  
    this.normal = this.localNormal.clone().applyMatrix3 (normalMat).normalize()
  }
}
/////////////////////////////////////////////////////////////
var camera, scene, renderer;
var balls =[];
var planes = [];
var plane;
var elevation = 40;
var sign = 1;

init();
animate();

function init() {

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  camera = new...