Verlet integration

with constraints

by Rebecca Chen

HTML

<div id="info">Verlet Integration</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.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 particles = [];
var constraints = [];
var mousePoint;  // WC of mouse (R3)
var mouse;  // WC of mouse (R2)
var mouseSpring;
var beingPulled = false;
var pulled;

var f_damp = 0.01;

var Particle = function(pos0) {
  this.pos = new THREE.Vector3();
  if (pos0 !== undefined) this.pos.copy(pos0);
  this.pos_old = this.pos.clone();
  this.force = new THREE.Vector3();
  //// for anchoring particles
  this.anchor = false;
  this.pulled = false;
  this.initpos = this.pos.clone();
  //this.mesh: to be assigned
};

Particle.prototype.update = function(dt) {
  var tmp = this.pos.clone();
  tmp.multiplyScalar(2 - f_damp);
  tmp.sub(this.pos_old.clone().multiplyScalar(1 - f_damp));
  tmp.add(this.force.clone().multiplyScalar(dt * dt));
  this.pos_old.copy(this.pos);
  this.pos.copy(tmp);
};

Particle.prototype.accumForce = function() {
  this.force.copy(new THREE.Vector3(0, -50, 0));
  // mouse spring ...
  if (this.pulled) {
    tmp = new THREE.Vector3();
    tmp.subVectors(mousePoint, this.pos).multiplyScalar (10);
    this.force.add(tmp);
  }
};

Constraint = function(p1, p2) {
  this.length = p1.pos.clone().sub(p2.pos).length();
  this.p1 = p1;
  this.p2 = p2;
  //this.mesh: to be assigned
}

function reflect(n, v) {
  var tmp = n.clone();
  tmp.multiplyScalar(tmp.dot(v) * 2);
  return v.clone().sub(tmp);
}

function attachGraphics() {

  // boundary 	
  var lineGeometry = new THREE.Geometry();
  var vertArray = lineGeometry.vertices;
  vertArray.push(new THREE.Vector3(-18, -18, 0), new THREE.Vector3(-18, 18, 0), new THREE.Vector3(18, 18, 0), new THREE.Vector3(18, -18, 0), new THREE.Vector3(-18, -18, 0));
  var lineMaterial = new THREE.LineBasicMaterial({
    color: 0x00cc00
  });
  var line = new THREE.Line(lineGeometry, lineMaterial);
  scene.add(line);

  var geometry = new THREE.SphereGeometry(0.5);
  var material = new THREE.MeshBasicMaterial({
    color: 0xff0000
  });

	// particles
  var mesh = new THREE.Mesh(geometry,...