Particle class

with orbitControls, XZgrid, info

by Leoooo

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)   // add to scene when particle is created
  }
  
  update (dt) {
		this.vel.add (this.force.clone().multiplyScalar (dt))
  	this.pos.add (this.vel.clone().multiplyScalar(dt))
    
  	// simple plane collision at y = -25
    
  	if (this.pos.y < -25) {
  		this.pos.y = -25;
    	this.vel.y = - 0.9*this.vel.y;
  	}

		this.mesh.position.copy (this.pos)
  }

}

///////////////////////////////////////////////////////////
var camera, scene, renderer;
var balls =[];

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 THREE.OrthographicCamera(-50, 50, 50, -50, -10, 100);
  camera.position.z = 10;

	let ground = new THREE.Mesh (new THREE.PlaneGeometry(100,50), new THREE.MeshBasicMaterial({color:'green'}))
  scene.add (ground)
  ground.position.y = -50
  
  /////////////////////////////////////////////////////////

	let ballMesh = new THREE.Mesh (new THREE.CircleGeometry (2,10), new THREE.MeshBasicMaterial())

	for (let i = 0; i < 3; i++) {
  	balls[i] = new Particle (ballMesh.clone())
  	balls[i].pos.set (10*i, 0, 0)
  }
  
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
	let whratio = window.innerWidth/window.innerHeight;
  camera.left = -50*whratio;
  camera.right = 50*whratio;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {

	dt = 0.1;    
  balls.forEach ( function(b) {b.update(dt)} )
  
  requestAnimationFrame(animate);
  render();
}

function render() {
  renderer.render(scene, camera);
}