camera work

This example demonstrates following and tracking cameras. A following camera behaves as if it is attached to the object it follows.

if (followCamera) {
  bug.mesh.add(camera);
  camera.position.set(0,3,-10);
  // Rotation needed because of YZ flip from Blender export?
  camera.rotation.y = Math.PI;
}

This is achieved by adding the camera as a child to the model. The position and orientation of the camera may then need adjustment to suit.

Tracking cameras do not translate, but rotate only to keep a specific model in the center of the field of view. The tracking camera code in the example is activated by changing the value of followCamera to false. The camera's lookAt function is used in each frame to update the camera. Note that this is not the lookAt function of the matrix used to orient models (i.e. model.matrix.lookAt(). A model faces a point by turning its +Z axis to intersect it. The camera renders in the -Z direction, so it needs to do the opposite.

1-2-three
example 16: camera work

<!DOCTYPE html>
<html>
<head>
<title>example 16: camera work</title>
<script type="text/javascript" src="js/three/three.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;
}

var redCube;

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);
}

var closeEnough = 1.0;

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

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

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
      35,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );

var loader = new THREE.ObjectLoader(  );
  var bugArray = [];
  var nBugs = 5;
  for (var i=0;i<nBugs;++i) {
    var bug = new VWBug(scene,new THREE.Vector3(0,0,0),loader);
    bugArray.push(bug);
  }

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

camera work

1-2-threeexample 16: camera work

1-2-three
example 16: camera work