Cleaning Up Three.js Code

‹prev | My Chain | next›

Up tonight, I am going to take care of a few loose ends in my raft Three.js / Physijs game.

Mostly, this involves cleaning things up like the invidual river banks. I create a helper function for this:

function bank(offset) {
  var width = 100
    , half = width / 2;

  var bank = new Physijs.BoxMesh(
    new THREE.CubeGeometry(1400, 100, 100),
    Physijs.createMaterial(
      new THREE.MeshNormalMaterial(), 0.2, 0.9
    ),
    0
  );
  bank.position.x = 100;
  if (offset < 0) {
    bank.position.z = offset - half;
  }
  else {
    bank.position.z = offset + half;
  }

  return bank;
}

One particular problem that I notice is that, as my river works itself back and forth across the land, there are gaps in the banks:

I solve this my adding "joints" to the turns in the river segments:

var joint = new THREE.Mesh(
    new THREE.CylinderGeometry(300, 300, 1),
    new THREE.MeshBasicMaterial({color: 0x483D8B})
  );
  joint.position.z = offset.z;
  joint.position.x = offset.x;
  scene.add(joint);

Not the cleanest solution, but it works:

I do the same for the end of the game (adding a little pond). Hopefully all of this leaves me with decent enough code for kids to type in. I will pick back up tomorrow with adding a few obstacles in the river. That ought to be enough for this game.

Day #490