Skip to content

Latest commit

 

History

History
82 lines (47 loc) · 2.11 KB

相机如何工作.md

File metadata and controls

82 lines (47 loc) · 2.11 KB

在THREE.js中有两种相机

  1. 正交投影相机
  2. 远景相机,透视投影相机

正交投影,一般用在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();