纳金网

标题: 利用HTML5构筑物理模拟环境3.2 [打印本页]

作者: 会飞的鱼 时间: 2012-8-20 15:08
标题: 利用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」函数、不仅仅是设置视点的中心、还能够让设置的相机参数发生实际的效果。

欢迎光临纳金网 (http://go.narkii.com/club/)