gravity

with orbitControls, XZgrid, info

HTML

<div id="info">Gravity
  <br/>move RED dot with mouse</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mouse = new THREE.Vector2();
var mousePoint;
var N = 50;
var R = 5;

var pars = [];
var meshes = [];

var Particle = function (x, y) {
  var xx = x || -30 + Math.random() * 60; //[-30,30]
  var yy = y || -30 + Math.random() * 60; //[-30,30]

  this.pos = new THREE.Vector2(xx, yy);
  this.vel = new THREE.Vector2();
  this.force = new THREE.Vector2();
};

Particle.prototype.update = function (dt) {

  var dd = new THREE.Vector2();
  dd.copy(mouse.clone().multiplyScalar(50).sub(this.pos));
  //    this.force.copy (dd.multiplyScalar (70/dd.lengthSq()));
  this.force.copy(dd.normalize().multiplyScalar(10));

  // velocity damping
  this.force.add(this.vel.clone().multiplyScalar(-0.05));

  // Euler
  this.pos.add(this.vel.clone().multiplyScalar(dt));
  this.vel.add(this.force.clone().multiplyScalar(dt));
};

Particle.prototype.collision = function () {

  if (this.pos.lengthSq() - R*R < 0) { // inside a radius R circle
    this.pos.setLength(R);
    var n = this.pos.clone().normalize();
    n.multiplyScalar (-2*n.dot (this.vel));
    this.vel.add (n);
  } 

}

init();
animate();

//////////////////////////////////////////////////////////

function init() {
  scene = new THREE.Scene();

  camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 10);
  camera.position.z = 10;
  scene.add(camera);

  // STATS
  stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '0px';
  stats.domElement.style.zIndex = 100;
  document.body.appendChild(stats.domElement);

  mousePoint = new THREE.Mesh(new THREE.CircleGeometry(1, 10),
    new THREE.MeshBasicMaterial({
      color: 0xff0000
    }));
  scene.add(mousePoint);

  var mesh = new THREE.Mesh(new THREE.CircleGeometry(0.5, 10), new THREE.MeshBasicMaterial());
  for (var i = 0; i < N; i++) {
    pars.push(new Particle());
    var mm = mesh.clone();
    scene.add(mm);
    meshes.push(mm);
  }
  var center = new THREE.Mesh (new...