Three.js的基础知识二
Three.js的相机
Three.js让场景动起来的两种方式
- 变换物体的位置
- 变换相机的位置
有一个函数可以不断的绘制场景,不断的调用render来重绘,这个循环就称为渲染循环。
function animate() {
render();
requestAnimationFrame(animate);
}
性能测试
FPS(Frames Per Second):视频或者动画每秒显示多少帧数。理论上,3D程序最大的帧数是显卡支持的刷新率,一般是60。
stats:一个监控程序 帧数、每帧时间、内存使用量的js库。使用方法可以看readme.md,进行使用。
tweenjs :给 tween 要修改的值、动画结束时的最终值和动画花费时间(duration),之后 tween 引擎就可以计算从开始动画点到结束动画点之间值,从而产生平滑的动画效果。
相机的工作原理
Three.js里共有正投影以及透视投影相机。
正投影相机:THREE.OrthographicCamera(left,right,top,bottom,near,far)其中near指的是相机最小能看到的平面,near指的是相机最远可以看到的平面。
透视相机:THREE.PerspectiveCamera(fov,aspect,near,far)。其中fov指的是视角角度,aspect指的是横宽比,near指的是*面,far指的是远平面。可以更改相机的fov模拟物体的放大与缩小。
camera.lookat指的是相机的指向的一个方向,lookat指的是一个方向而不是一个点。默认是正z轴看向-z轴。
up类似于相机的快门的位置,即相机的上方的位置。默认是y轴的正方向。
相机的position、up、lookat确定了相机的唯一摆放。