prerender functions

This example is the same as the previous one, except that the code has a structure that will scale to larger applications more easily. Specifically, the VWBug constructor loads the model, and also implements a prerender function which does the animation (this function is often called prerender instead). This gets the animation code out of the rendering function, which can otherwise become unreadable in larger applications. Note that one additional safety check on the movement is implemented as well.

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

1-2-three
example 11: prerender functions

<!DOCTYPE html>
<html>
<head>
<title>example 11: prerender functions</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 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
  );
  scene.add(camera);
  
  // 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) {
    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 clock = new THREE.Clock();
  
  var animate = function() {
    var dt = clock.getDelta();
    control.update(dt);
    bug.prerender(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>

prerender functions

1-2-threeexample 11: prerender functions

1-2-three
example 11: prerender functions