waypoints

This example demonstrates moving a model between predefined waypoints, visualized as colored cubes. After clicking in the canvas to focus the keyboard on it, the number keys 1, 2, and 3 may be used to trigger the movement.

The VWBug constructor starts by defining the speed of the model and it's goal. It's goal is exactly where it currently is, so no movement will be necessary until the user issues a command.

function VWBug(scene,loc) {
  this.speed = 1.0;
  this.goal = loc;

When the user presses a key, a key press handler sets the goal of the bug to be the position of the appropriate cube. The render function renderFunc then animates the model.

var dx = new THREE.Vector3();
dx.sub(bug.goal,bug.mesh.position);
if (dx.length() > closeEnough) {
  dx.normalize();
  dx.multiplyScalar(dt*bug.speed);
  bug.mesh.position.addSelf(dx);
}

The vector dx will contain the change in position that our model needs for the current frame. It is initialized to the vector from the model's current position to its goal. If that vector is short enough, we don't need to move the model any more. But if it's not, this vector is normalized to a unit (length one) vector, which is then scaled to be the appropriate length given the elapsed time and the model's speed. The mesh position is then updated.

1-2-three
example 10: waypoints

<!DOCTYPE html>
<html>
<head>
<title>example 10: waypoints</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/TweakedOrbitControls.js"></script>
<script type="text/javascript">

function fixMatrix(mesh) {
  bakeRotation(mesh);
  rotate180(mesh);
  bakeRotation(mesh);
}

function rotate180(mesh) {
  var m = new THREE.Matrix4();
  m.makeRotationY(Math.PI);
  mesh.matrix.multiplyMatrices(mesh.matrix,m);
  mesh.matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
}

function bakeRotation(mesh) {
  mesh.updateMatrixWorld();
  var geom = mesh.geometry;
  var rotMatrix = mesh.matrix.clone();
  rotMatrix.setPosition( new THREE.Vector3(0,0,0) );
  var pos = new THREE.Vector3();
  pos.setFromMatrixPosition(mesh.matrix);
  geom.applyMatrix(rotMatrix);
  mesh.matrix.identity();
  mesh.matrix.setPosition(pos);
  mesh.matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
  mesh.updateMatrixWorld();
}

var redCube;

function VWBug(scene,loc,loader) {
  this.speed = 1.0;
  this.goal = loc;
  var that = this;
  this.onScene = function(scn) {
    that.mesh = scn.getObjectByName("Bug");
    that.mesh.material.shininess = 5;
    that.mesh.position.copy(loc);
    fixMatrix(that.mesh);
    scene.add(that.mesh);
  };
  loader.load( "models/vwbug/vwbug-scene.json", this.onScene );
}

function init() {  
  var canv = document.getElementsByTagName("canvas")[0];
  var w = canv.clientWidth;
  var h = canv.clientHeight;

var renderer = new THREE.WebGLRenderer({canvas:canv});
  renderer.setSize( w, h );
  renderer.setClearColor( new THREE.Color(0xeeeeee), 1 );

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  
  // Camera looks toward negative z with y up
  camera.position.set( 5, 5, 100 );
  
  var control = new THREE.OrbitControls(camera, canv); 
  
  var light = new THREE.PointLight( 0xFFFFFF );
  light.position.set( 100, 0, 100 );
  scene.add( light );
  
  var lightAmb = new THREE.AmbientLight( 0x999999 );
  scene.add( lightAmb );

var loader = new THREE.ObjectLoader(  );
  var bug = new VWBug(scene,new THREE.Vector3(0,0,0),loader);
  
  redCube = new THREE.Mesh(
    new THREE.CubeGeometry( 1, 1, 1 ),
    new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
  );
  redCube.position.set(10,0,0);
  scene.add( redCube );
  
  var greenCube = new THREE.Mesh(
    new THREE.CubeGeometry( 1, 1, 1 ),
    new THREE.MeshLambertMaterial( { color: 0x00FF00 } )
  );
  greenCube.position.set(0,0,10);
  scene.add( greenCube );
  
  var blueCube = new THREE.Mesh(
    new THREE.CubeGeometry( 1, 1, 1 ),
    new THREE.MeshLambertMaterial( { color: 0x0000FF } )
  );
  blueCube.position.set(10,10,0);
  scene.add( blueCube );
  
  function onKeyDown(evt) {
    console.log("in onKeyDown");
    var result;
    switch (evt.keyCode) {
      case 49: // '1'
        bug.goal = redCube.position;
        break;
      case 50: // '2'
        bug.goal = greenCube.position;
        break;
      case 51: // '3'
        bug.goal = blueCube.position;
        break;
    }
  }

window.addEventListener('keydown', onKeyDown, false );
  
  var closeEnough = 0.1;
  
  var clock = new THREE.Clock();
  
  function animate() {
    var dt = clock.getDelta();
    control.update(dt);
    if (bug.mesh) {
      var dx = new THREE.Vector3();
      dx.subVectors(bug.goal,bug.mesh.position);
      if (dx.length() > closeEnough) {
        dx.normalize();
        dx.multiplyScalar(dt*bug.speed);
        bug.mesh.position.add(dx);
      }
    }
    renderer.render(scene,camera);
    requestAnimationFrame( animate );
  }

requestAnimationFrame( animate );
}
  
window.onload = init;
window.onresize = init;
</script>
</head>
<body><canvas style="width:100%;height:95%;border:1px gray solid;"></body>
</html>