/** * @author mrdoob / http://mrdoob.com/ * @author greggman / http://games.greggman.com/ * @author zz85 / http://www.lab4games.net/zz85/blog */ /* ///PerspectiveCamera方法根據 fov, aspect, near, far 生成透視投影相機.PerspectiveCamera對象的功能函數采取 /// 定義構造的函數原型對象來實現. */ ///<summary>PerspectiveCamera</summary> ///<param name ="fov" type="Number">指明相機的可視角度,可選參數,如果未指定,初始化為50</param> ///<param name ="aspect" type="Number">指明相機可視范圍的長寬比,可選參數,如果未指定,初始化為1</param> ///<param name ="near" type="Number">指明相對深度剪切面的近的距離，必須為正數,可選參數,如果未指定,初始化為0.1</param> ///<param name ="far" type="Number">指明相對深度剪切面的遠的距離，必須為正數,可選參數,如果未指定,初始化為2000</param> ///<returns type="Matrix4">返回PerspectiveCamera,透視投影相機.</returns> THREE.PerspectiveCamera = function ( fov, aspect, near, far ) { THREE.Camera.call( this ); //調用Camera對象的call方法,將本來屬于Camera的方法交給當前對象PerspectiveCamera來使用. this.fov = fov !== undefined ? fov : 50; //指明相機的可視角度,可選參數,如果未指定,初始化為50 this.aspect = aspect !== undefined ? aspect : 1; //指明相機可視范圍的長寬比,可選參數,如果未指定,初始化為1 this.near = near !== undefined ? near : 0.1; //指明相對深度剪切面的近的距離，必須為正數,可選參數,如果未指定,初始化為0.1 this.far = far !== undefined ? far : 2000; //指明相對深度剪切面的近的距離，必須為正數,可選參數,如果未指定,初始化為2000 this.updateProjectionMatrix(); //調用updateProjectionMatrix方法,更新相機的投影矩陣. }; /************************************************************************************** ****下面是PerspectiveCamera對象提供的功能函數定義,1部份通過prototype繼承自Camera方法 ***************************************************************************************/ THREE.PerspectiveCamera.prototype = Object.create( THREE.Camera.prototype ); /* ///setLens方法根據 焦距 focalLength, 畫幅大小 frameHeight 更新透視投影相機的視野. */ ///<summary>setLens</summary> ///<param name ="focalLength" type="Number">焦距</param> ///<param name ="frameHeight" type="Number">畫幅大小</param> ///<returns type="Matrix4">返回更新視野的透視投影相機.</returns> /** * Uses Focal Length (in mm) to estimate and set FOV * 35mm (fullframe) camera is used if frame size is not specified; * 使用焦距(單位毫米)設置相機時,如果畫幅大小沒有指定,默許使用FOV(視野)35mm(全畫幅)相機, * Formula based on http://www.bobatkins.com/photography/technical/field_of_view.html */ THREE.PerspectiveCamera.prototype.setLens = function ( focalLength, frameHeight ) { if ( frameHeight === undefined ) frameHeight = 24; //如果畫幅大小沒有指定,初始化為24,全畫幅相機 this.fov = 2 * THREE.Math.radToDeg( Math.atan( frameHeight / ( focalLength * 2 ) ) ); //更新透視投影相機的視野 this.updateProjectionMatrix(); //更新投影矩陣 } /* ///setViewOffset方法為1個大的平截頭體設置視口偏移,這個方法在多顯示器,多臺機器,顯示器矩陣上利用非常有效 */ ///<summary>setViewOffset</summary> ///<param name ="fullWidth" type="Number">1個超大的攝像機場景的總寬度</param> ///<param name ="fullHeight" type="Number">1個超大的攝像機場景的總高度</param> ///<param name ="x" type="Number">當前攝像機左上角點的x坐標在網格內的起始點</param> ///<param name ="y" type="Number">當前攝像機左上角點的y坐標在網格內的起始點</param> ///<param name ="width" type="Number">當前攝像機的寬度</param> ///<param name ="height" type="Number">當前攝像機的高度</param> ///<returns type="Matrix4">返回更新透視投影矩陣的透視投影相機.</returns> /** * Sets an offset in a larger frustum. This is useful for multi-window or * multi-monitor/multi-machine setups. * 為1個大的平截頭體設置視口偏移,這個方法在多顯示器,多臺機器,顯示器矩陣上利用非常有效. * * For example, if you have 3x2 monitors and each monitor is 1920x1080 and * the monitors are in grid like this * 比如,你有3x2 個顯示器,每一個顯示器的分辨率是1920x1080,組成的顯示器矩陣向下面的網格 * * +---+---+---+ * | A | B | C | * +---+---+---+ * | D | E | F | * +---+---+---+ * * then for each monitor you would call it like this * 然后,你可以向下面這樣為每臺顯示器調用setOffset()方法,讓每一個顯示器顯示畫布的1部份. * * 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; //1個超大的攝像機場景的總寬度 this.fullHeight = fullHeight; //1個超大的攝像機場景的總高度 this.x = x; //當前攝像機左上角點的x坐標在網格內的起始點 this.y = y; //當前攝像機左上角點的y坐標在網格內的起始點 this.width = width; //當前攝像機的寬度 this.height = height; //當前攝像機的高度 this.updateProjectionMatrix(); //返回更新透視投影矩陣的透視投影相機 }; /* ///updateProjectionMatrix方法返回透視投影相機的可視邊界的矩陣.當相機的參數被更改后,必須調用此參數. */ ///<summary>updateProjectionMatrix</summary> ///<returns type="OrthographicCamera">返回新的OrthographicCamera對象</returns> THREE.PerspectiveCamera.prototype.updateProjectionMatrix = function () { if ( this.fullWidth ) { var aspect = this.fullWidth / this.fullHeight; var top = Math.tan( THREE.Math.degToRad( this.fov * 0.5 ) ) * 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.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.makePerspective( this.fov, this.aspect, this.near, this.far ); } }; /*clone方法 ///clone方法克隆PerspectiveCamera對象 */ ///<summary>clone</summary> ///<returns type="PerspectiveCamera">返回克隆的PerspectiveCamera對象</returns> THREE.PerspectiveCamera.prototype.clone = function () { var camera = new THREE.PerspectiveCamera(); THREE.Camera.prototype.clone.call( this, camera ); //調用THREE.Camera.Clone(camera)方法,克隆透視投影相機對象 camera.fov = this.fov; //將透視投影相機的 fov 屬性值復制 camera.aspect = this.aspect; //將透視投影相機的 aspect 屬性值復制 camera.near = this.near; //將透視投影相機的 near 屬性值復制 camera.far = this.far; //將透視投影相機的 far 屬性值復制 return camera; //返回克隆的PerspectiveCamera對象 };