waypoint steering

This example demonstrates movement between waypoints of an object with a limited rotational speed. The 1, 2, and 3 keys command the model to move to the red, greed, and blue waypoints (cubes) respectively. The code is a combination of the last two examples. In the prerender function the heading of the model is updated first, and then it is moved straight ahead according to the new heading.

1-2-three
example 13: waypoint steering

<!DOCTYPE html>
<html>
<head>
<title>example 13: waypoing steering</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();
}

function angleBetweenQuats(qBefore,qAfter) {
  q1 = new THREE.Quaternion();
  q1.copy(qBefore);
  q1.inverse();
  q1.multiply(qAfter);
  var halfTheta = Math.acos( q1.w );
  return 2*halfTheta;
}

function lookTowards(fromObject,toPosition, dTheta) {
  var quat0 = new THREE.Quaternion();
  quat0.setFromRotationMatrix( fromObject.matrix );
  var eye = fromObject.position;
  var center = toPosition;
  var up = new THREE.Vector3(0,1,0);
  var mat = new THREE.Matrix4();
  mat.lookAt(center,eye,up);
  var quat1 = new THREE.Quaternion();
  quat1.setFromRotationMatrix( mat );
  var deltaTheta = angleBetweenQuats(quat0,quat1);
  var frac = dTheta/deltaTheta;
  if (frac>1)  frac=1;
  fromObject.quaternion.slerp(quat1,frac);
}

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, 50 );
  
  var control = new THREE.OrbitControls(camera,canv);

var light = new THREE.PointLight( 0xFFFFFF );
  light.position.set( 20, 0, 20 );
  scene.add( light );
  
  var lightAmb = new THREE.AmbientLight( 0x999999 );
  scene.add( lightAmb );
  
  var up = new THREE.Vector3(0,1,0);
  
  function onKeyDown(evt) {
    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 = 1.0;
  var clock = new THREE.Clock();
  
  var animate = function() {
    var dt = clock.getDelta();
    bug.prerender(dt);
    control.update(dt);
    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>

waypoint steering

1-2-threeexample 13: waypoint steering

1-2-three
example 13: waypoint steering