ThreeJS中的相机

在ThreeJS中一共有三个关于相机的JS文件,Camera.js、OrthographicCamera.js、PerspectiveCamera.js,分别是普通的相机、正交、正投影的相机、第三人称相机

首先是普通的相机,Camera.js

   
   
   
   
THREE . Camera = function () {

if ( arguments . length ) {

console . warn ( 'DEPRECATED: Camera() is now PerspectiveCamera() or OrthographicCamera().' );
return new THREE . PerspectiveCamera ( arguments [ 0 ], arguments [ 1 ], arguments [ 2 ], arguments [ 3 ] );

}

THREE . Object3D . call ( this );

this . matrixWorldInverse = new THREE . Matrix4 ();

this . projectionMatrix = new THREE . Matrix4 ();
this . projectionMatrixInverse = new THREE . Matrix4 ();


};

THREE . Camera . prototype = new THREE . Object3D ();
THREE . Camera . prototype . constructor = THREE . Camera ;

THREE . Camera . prototype . lookAt = function ( vector ) {

// TODO: Add hierarchy support.

this . matrix . lookAt ( this . position , vector , this . up );

if ( this . rotationAutoUpdate ) {

this . rotation . setRotationFromMatrix ( this . matrix );

}

};
camera里面有四个参数:camera(fov,aspect,near,far)

fov:垂直方向的观察角度,也就是眼睛上下俯视的观察角度

aspect:视窗的宽高比

near:最近视角 相机能看见的最近视角

far: 最远视角  相机能看见的最远视角

THREE.Camera.prototype=new THREE.Object3D();说明camera也是一个3D Object,所以一共3D Object有的属性,camera 都有

另外,camera.lookAt=() camera 的朝向。

正交/投影相机

使用指定的位置、投影方向、向上方向和宽度初始化

OrthographicCamera.js

   
   
   
   
THREE . OrthographicCamera = function ( left , right , top , bottom , near , far ) {

THREE . Camera . call ( this );

this . left = left ;
this . right = right ;
this . top = top ;
this . bottom = bottom ;

this . near = ( near !== undefined ) ? near : 0.1 ;
this . far = ( far !== undefined ) ? far : 2000 ;

this . updateProjectionMatrix ();

};

THREE . OrthographicCamera . prototype = new THREE . Camera ();
THREE . OrthographicCamera . prototype . constructor = THREE . OrthographicCamera ;

THREE . OrthographicCamera . prototype . updateProjectionMatrix = function () {

this . projectionMatrix = THREE . Matrix4 . makeOrtho ( this . left , this . right , this . top , this . bottom , this . near , this . far );

};

第三人称摄像机

第三人称相机是继承了普通相机类来创建的一共特殊的相机,第三人称相机的目标是当物体移动时跟随它并保持一定的距离:否则当物体移动到摄像机边界后,将造成摄像机剧烈移动。让摄像机跟随一个物体,如玩家控制角色,你需要定义一下如下参数:

1、跟随位置,摄像机跟随的目标物体的位置

2、跟随的方向,摄像机沿哪个方向移动来跟随物体

3、跟随速度

4、跟随距离,摄像机与物体的距离

。。。


我们也来看一下第三人称相机的JS文件。

   
   
   
   
THREE . PerspectiveCamera = function ( fov , aspect , near , far ) {

THREE . Camera . call ( this );

this . fov = fov !== undefined ? fov : 50 ;
this . aspect = aspect !== undefined ? aspect : 1 ;
this . near = near !== undefined ? near : 0.1 ;
this . far = far !== undefined ? far : 2000 ;

this . updateProjectionMatrix ();

};

THREE . PerspectiveCamera . prototype = new THREE . Camera ();
THREE . PerspectiveCamera . prototype . constructor = THREE . PerspectiveCamera ;


/**
* Uses Focal Length (in mm) to estimate and set FOV
* 35mm (fullframe) camera is used if frame size is not specified;
* Formula based on http://www.bobatkins.com/photography/technical/field_of_view.html
*/

THREE . PerspectiveCamera . prototype . setLens = function ( focalLength , frameSize ) {

frameSize = frameSize !== undefined ? frameSize : 43.25 ; // 36x24mm

this . fov = 2 * Math . atan ( frameSize / ( focalLength * 2 ) );
this . fov = 180 / Math . PI * this . fov ;

this . updateProjectionMatrix ();

}


/**
* Sets an offset in a larger frustum. This is useful for multi-window or
* multi-monitor/multi-machine setups.
*
* For example, if you have 3x2 monitors and each monitor is 1920x1080 and
* the monitors are in grid like this
*
* +---+---+---+
* | A | B | C |
* +---+---+---+
* | D | E | F |
* +---+---+---+
*
* then for each monitor you would call it like this
*
* var w = 1920;
* var h = 1080;
* var fullWidth = w * 3;
* var fullHeight = h * 2;
*
* --A--
* camera.setOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
* --B--
* camera.setOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
* --C--
* camera.setOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
* --D--
* camera.setOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
* --E--
* camera.setOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
* --F--
* camera.setOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
*
* Note there is no reason monitors have to be the same size or in a grid.
*/

THREE . PerspectiveCamera . prototype . setViewOffset = function ( fullWidth , fullHeight , x , y , width , height ) {

this . fullWidth = fullWidth ;
this . fullHeight = fullHeight ;
this . x = x ;
this . y = y ;
this . width = width ;
this . height = height ;

this . updateProjectionMatrix ();

};


THREE . PerspectiveCamera . prototype . updateProjectionMatrix = function () {

if ( this . fullWidth ) {

var aspect = this . fullWidth / this . fullHeight ;
var top = Math . tan ( this . fov * Math . PI / 360 ) * this . near ;
var bottom = - top ;
var left = aspect * bottom ;
var right = aspect * top ;
var width = Math . abs ( right - left );
var height = Math . abs ( top - bottom );

this . projectionMatrix = THREE . Matrix4 . makeFrustum (
left + this . x * width / this . fullWidth ,
left + ( this . x + this . width ) * width / this . fullWidth ,
top - ( this . y + this . height ) * height / this . fullHeight ,
top - this . y * height / this . fullHeight ,
this . near ,
this . far );

} else {

this . projectionMatrix = THREE . Matrix4 . makePerspective ( this . fov , this . aspect , this . near , this . far );

}

};

perspectiveCamera 有10个参数分别是:

parameters = {
*  fov: ,
*  aspect: ,
*  near: ,
*  far: ,
*  target: ,


*  movementSpeed: ,      跟随速度
*  lookSpeed:


*  autoForward: ,  自动向前
*  autoBackward: , 自动向后


*  distanceAbove: ,    跟随距离,摄影机与物体的距离 
*  distanceBehind: ,   跟随距离,摄影机与物体的距离 


*  targetMesh: ,   跟随的物体


* }


你可能感兴趣的:(ThreeJS中的相机)