random mover

In this example the mover selects a random waypoint to move to. When the waypoint is reached, another waypoint is randomly selected.

The code uses a handy helper function called randomChoice which selects and returns a random member of any list.

function randomChoice(list) {
  var i = Math.floor( Math.random()*list.length );
  return list[i];
}

1-2-three
example 14: random mover

<!DOCTYPE html>
<html>
<head>
<title>example 14: random mover</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 randomChoice(list) {
  var i = Math.floor( Math.random()*list.length );
  return list[i];
}

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 loader = new THREE.ObjectLoader(  );
  var bug = new VWBug(scene,new THREE.Vector3(0,0,0),loader,waypoints);

var light = new THREE.PointLight( 0xFFFFFF );
  light.position.set( 20, 0, 20 );
  scene.add( light );
  
  var lightAmb = new THREE.AmbientLight( 0x333333 );
  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.onkeydown = onKeyDown;
  
  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>

random mover

1-2-threeexample 14: random mover

1-2-three
example 14: random mover