摘要：我們先規(guī)定好相機(jī)到平面的距離為，然后試試看能不能通過計算設(shè)置值，剛好讓平面填滿一個寬高比為的屏幕。最終代碼與效果計算相機(jī)的函數(shù)在相機(jī)前方距離想要看到最大正方形區(qū)域邊長為屏幕寬高比效果的完整代碼原文鏈接

這篇文章只討論 PerspectiveCamera 的適配方法

做過手機(jī) H5 的同學(xué)可能會覺得屏幕適配挺麻煩。原因是設(shè)計師提供的設(shè)計稿尺寸比固定，但是前端開發(fā)者卻要適配不同大小、長寬比的目標(biāo)設(shè)備。適配的終極目標(biāo)無非是最大程度把主體內(nèi)容優(yōu)雅地呈現(xiàn)給用戶。開發(fā)和設(shè)計如果沒有協(xié)調(diào)好的話可能會妥協(xié)比較丑陋的方案，例如由于設(shè)計比例問題，為了照顧主體內(nèi)容不被裁剪，只好設(shè)備兩邊，或者上下留黑邊這種。

不過在 3D 的世界里，我們不用擔(dān)心會有黑邊的問題，因為 3D 場景是無限延伸的，總能填滿任何比例的屏幕。

先看看 PerspectiveCamera 官方 API 說明如下：

PerspectiveCamera( fov, aspect, near, far )

fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.

上面四個參數(shù)都會影響成像結(jié)果，fov 和 aspect 設(shè)置 XY 平面的范圍，也就是廣度。 near 和 far 影響的是縱深 Z 軸的范圍，也就是深度。縱深只要保證物體離相機(jī)距離在這個范圍就可以了，這是為了性能而設(shè)置的參數(shù)，由用戶設(shè)置，只渲染必要的東西。實際上真實的相機(jī)這兩個值對應(yīng)的是 0 到 無限遠(yuǎn)。

這些參數(shù)設(shè)置好之后，成像就相應(yīng)確定了。最后 three.js 把相機(jī)拍攝到的矩形區(qū)域?qū)?yīng)好四個頂點渲染到屏幕上。同樣比例的屏幕看到的圖像是一致的，與屏幕大小無關(guān)。

下面我用一個簡單的場景來看一下這些參數(shù)對成像的影響。

相機(jī) （PerspectiveCamera）

一個邊長為 100 的平面（主體內(nèi)容范圍），放在世界坐標(biāo)中心。

var camera = new THREE.PerspectiveCamera(53, 500 / 500, 0.1, 1000);

var planeGemo = new THREE.PlaneGeometry( 100, 100, 10, 10 )
var meshMaterial = new THREE.MeshLambertMaterial();
meshMaterial.color = new THREE.Color(0x2dcaf1);
meshMaterial.side = THREE.DoubleSide;

var wireFrameMat = new THREE.MeshBasicMaterial();
wireFrameMat.color = new THREE.Color(0xffffdffffd);
wireFrameMat.wireframe = true;

var plane = THREE.SceneUtils.createMultiMaterialObject(planeGemo, [meshMaterial, wireFrameMat]);

scene.add(plane);

在任何屏幕下，都能最大程度地顯示完整的立方體。最大程度，就是最少多余空間的意思。下面是要達(dá)到效果

可以直接想到的一種適配方法是——改變 camera 到目標(biāo)物體的距離以控制成像的內(nèi)容，但是這樣做計算成本比較高，而且還有可能影響其他一些數(shù)值，然后需要相應(yīng)一起計算修改。
我想到改變視角也可以達(dá)到控制成像內(nèi)容多少的目的，于是我想可不可以只通過改變 fov 一個數(shù)值，達(dá)到我要的效果。

fov 官網(wǎng)的定義翻譯過來是垂直方向的視角大小。我們先規(guī)定好相機(jī)到平面的距離為 100，然后試試看能不能通過計算設(shè)置 fov 值，剛好讓平面填滿一個寬高比為 1:1 的屏幕。

plane.position.set(0,0,0);
camera.position.set(0,0,100);
camera.lookAt(new THREE.Vector3);

觀察上面的圖，可以很容易求出 fov 的值， fov = arctan((100/2)/100) * 2; fov 為 0.9272952180016122，約等于 53 度。

camera.fov = Math.atan((100/2)/100) * 2 * (180 / Math.PI);
camera.updateProjectionMatrix();

設(shè)置完剛剛求出的 fov 值，將場景渲染到 寬高比為 1:1 的畫布上。

渲染結(jié)果和預(yù)想的一樣，平面剛好填滿了 1:1 的畫布。

下面在固定的 fov 下，使用 dat.gui 工具調(diào)整寬高比，觀察渲染區(qū)域的變化。

因為fov設(shè)置的是垂直方向的視角范圍，可以看到無論我們怎么改變寬高比例，垂直方向的渲染范圍，都是一致的。水平方向則是以裁剪的方式顯示。也就是說當(dāng)我們設(shè)置好視角讓垂直方向范圍剛好等于主體內(nèi)容的范圍，只要寬高比大于1，我們得到的渲染結(jié)果，已經(jīng)是最佳的了。問題就只剩下當(dāng)寬高比小于1的情況了。

寬高比小于1的時候，垂直方向顯示的高度剛好是等于主體內(nèi)容的高度。為了能讓水平方向完整顯示主體內(nèi)容，我們只有將垂直方向范圍增大，也就是將 fov 設(shè)置一個更大的值，此時水平方向的范圍也會隨之增大。當(dāng)將 fov調(diào)整到 水平方向剛好能顯示主體內(nèi)容時，垂直方向此時顯示的范圍是超過主體內(nèi)容垂直方向的范圍的。其中的關(guān)系，其實可以用很簡單的函數(shù)求出來。

已知 照相機(jī)到主題內(nèi)容的距離為 d
正方形主體內(nèi)容的邊長為 w

設(shè)寬高比為 r，求照相機(jī)垂直方向的視角 f

當(dāng) r >= 1 時，照相機(jī)拍攝到的垂直方向范圍等于 w

當(dāng) r > 1
d * tan(f/2) * 2 = w

當(dāng) r < 1 時，照相機(jī)拍攝到的水平方向范圍等于 w，垂直方向范圍應(yīng)該是 w/r
d * tan(f/2) * 2 = w/r

這樣，任意寬高比例的屏幕應(yīng)該對應(yīng)多大的垂直視角就確定了。

var controls = new function () {

    camera.position.z = CAMERA_TO_MAIN_DIS;

    this.width = 500;
    this.height = 500;
    this.planeRY = 0;

    /**
    * 計算相機(jī) fov 的函數(shù)
    * @param d : 在相機(jī)前方 d 距離
    * @param w : 想要看到最大正方形區(qū)域邊長為 w
    * @param r : 屏幕寬高比
    */
    function calcFov(d, w, r) {
        var f;
        var vertical = w;
        if (r < 1) {
            vertical = vertical/r;
        }
        f = Math.atan(vertical/d/2)*2 * (180 / Math.PI);
        return f;
    }

    this.redraw = ()=>{
        webGLRenderer.setSize(this.width, this.height);
        plane.rotation.y = this.planeRY;
        camera.fov = calcFov(CAMERA_TO_MAIN_DIS, MAIN_CONTENT_WIDTH, this.width / this.height);
        camera.aspect = this.width / this.height;
        camera.updateProjectionMatrix();
    }
}

效果：

demo 的完整代碼：http://codepen.io/JasonTurbo/pen/ZLwJMo
原文鏈接：http://gnauhca.com/blog/2016/11/24/threejs/THREEJS%E5%B1%8F%E5%B9%95%E9%80%82%E9%85%8D/