threejs笔记4

threejs笔记3

 这是第一次学习threejs，记录一些学习笔记，简化知识点, 如果对您也有帮助请搜索头像二维码或者搜索小程序“上品威客”，感谢您的支持

让场景动起来

调用requestAnimationFrame函数，传递一个callback参数，则在下一个动画帧时，会调用callback这个函数。

function animate() {
    render();
    requestAnimationFrame( animate );
}

性能

帧数：图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）来表示

性能监视器

在Three.js中，性能监视器被封装在类Stats中
下载：https://github.com/mrdoob/stats.js 

//new 一个stats对象
stats = new Stats();

//将这个对象加入到html网页中去
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement);

//循环中加入update
function animation()
{
   requestAnimationFrame(animation);
	stats.update();
}

动画引擎Tween.js

下载：https://github.com/tweenjs/tween.js
引入：
构建对象：function initTween(){new TWEEN.Tween( mesh.position).to( { x: -400 }, 3000 ).repeat( Infinity ).start();}
不断更新：TWEEN.update();

三维空间

相机

Threejs中相机抽象基类类是THREE.Camera，其子类有两种相机，正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera，区别是：透视投影有一个基本点，就是远处的物体比近处的物体小

正交投影相机

OrthographicCamera( left, right, top, bottom, near, far )
1、 left：左平面距离相机中心点的垂直距离
2、 right：右平面距离相机中心点的垂直距离
3、 top：顶平面距离相机中心点的垂直距离
4、bottom：底平面距离相机中心点的垂直距离
5、near：近平面距离相机中心点的垂直距离
6、far：远平面距离相机中心点的垂直距离

透视投影相机

PerspectiveCamera( fov, aspect, near, far )
1、视角fov：眼睛睁开的角度,如果为180,那么可以认为你的视界很广阔,但是在180度的时候，往往物体很小
2、近平面near：可以认为是眼睛距离近处的距离，假设为10米远，请不要设置为负值
3、远平面far：这个呢，表示你远处的裁面
4、纵横比aspect：实际窗口的纵横比，即宽度除以高度。
var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );