利用HTML5构筑物理模拟环境3.2

会飞的鱼

例２－２：TUTORIAL2_2.HTML（相机的移动）
在上一节、实现了物体的移动动画效果、按照同样的步骤也可以来移动相机（视点）。 在例2的基础上，追加了相机(视点）的移动。
var t=0;

function loop() {

  t++;

  renderer.clear();

  cube[0].rotation.set( t/100, 0, 0 );

  cube[1].rotation.set( 0, t/100, 0 );

  cube[2].rotation.set( 0, 0, t/100 );

  camera.position.set( 400*Math.cos(t/100), 400*Math.sin(t/200), 50*Math.cos(t/50));

  camera.lookAt( {x:0, y:0, z:0 } );

  renderer.render(scene, camera);

  window.requestAnimationFrame(loop);

}

可以看到相机（视点）发生了移动。 关于代码中，调用了Javascript中[Math]类的一些方法， 这些方法应该曾经在学校数学中学习过。（一览点击这里） 比如
Math.PI               //pi

Math.cos(theta)       //cos(        heta)

Math.asin(x)          //arcsin(x)

Math.pow(x,2)         //x^2

Math.sqrt(x)          //sqrt{x}

Math.exp(x)           //exp{x}>等。 更改相机参数的时候、一定要在「camera.lookAt」函数之前进行。 因为「camera.lookAt」函数、不仅仅是设置视点的中心、还能够让设置的相机参数发生实际的效果。