在ThreeJS中一共有三个关于相机的JS文件，Camera.js、OrthographicCamera.js、PerspectiveCamera.js，分别是普通的相机、正交、正投影的相机、第三人称相机
首先是普通的相机，Camera.js
camera里面有四个参数：camera(fov,aspect,near,far)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 );
}
};
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: <float>,
* aspect: <float>,
* near: <float>,
* far: <float>,
* target: <THREE.Object3D>,
* movementSpeed: <float>, 跟随速度
* lookSpeed: <float>,
* autoForward: <bool>, 自动向前
* autoBackward: <bool>, 自动向后
* distanceAbove: <float>, 跟随距离,摄影机与物体的距离
* distanceBehind: <float>, 跟随距离,摄影机与物体的距离
* targetMesh: <THREE.Object3D>, 跟随的物体
* }
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
