在THREE.js中有两种相机
- 正交投影相机
- 远景相机,透视投影相机
正交投影,一般用在3d制图中,在这种投影下,所有物体大小不会发生形变,不会产生透视,web3d使用的很少
new THREE.OrthographicCamera( left, right, top, bottom, near, far )
left — 相机视椎体(Camera frustum)左面。
right — 相机视椎体(Camera frustum)右面。
top — 相机视椎体(Camera frustum)上面。
bottom — 相机视椎体(Camera frustum)下面。
near — 相机视椎体(Camera frustum)前面(靠近相机的这一面)。
far — 相机视椎体(Camera frustum)后面(远离相机的这一面)。
透视投影,近大远小,具有透视效果,接近人眼所看到的效果。
Web3D中常使用的一种相机。
new THREE.PerspectiveCamera( fov, aspect, near, far )
fov — 相机视锥体垂直视角 , 一般75 45
aspect — 相机视锥体宽高比,一般window.innerWidth / window.innerHeight
near — 相机视锥体近裁剪面
far — 相机视锥体远裁剪面。
属性:
**camera.up.x/y/z **
表示上方向量,表示的是方向,-1 0 0 和 -100 0 0 表示的方向一样,这个比较难理解,可以把up比作头顶,camera比做眼睛
默认是 0 1 0,如果改成0 -1 0,那拍摄的图像就是倒立的,像相机一样,拍了个倒图。
先设置up方向再设置lookAt,up是无效的。
up和lookAt方向必须垂直
camera.up.x = 1;
camera.up.y = 0;
camera.up.z = 0;
camera.lookAt(cube.position);
//camera.rotation.z = -Math.PI/2; //和up 0 1 0 时,看到的物体一样
//注意设置顺序
如果在requestAnimationFrame中lookAt一个对象,camera.rotation是无效的,up是可以设置的,个人猜测是up和lookAt已经固定了摄像机位置,所以旋转无效的。
方法:
camera.lookAt( vector3 );
该函数设定相机看向哪个方向
lookAt 的方向是垂直于镜头的
updateProjectionMatrix()
更新投影变换矩阵
camera.fov = ***;
camera.updateProjectionMatrix();