監聽窗口大小變化，改變畫面大小-[Three.js]-[onResize]

如果沒有監聽窗口變化，將會出現一下情況：

為了避免這種情況，有時候我們可能希望我們的畫面能夠隨着瀏覽器窗口大小的變化自適應變化，如下效果：

怎么實現呢？

首先，我們需要像這樣 注冊一個事件監聽器 ：

window.addEventListener('resize',onResize,false)

我們給這個監聽器 設置了一個回調函數 ，也就是說，現在，只要瀏覽器窗口大小一改變，onResize這個函數就會被觸發，我們接下來 定義該回調函數的動作 ，我們需要在該函數中，實現更新camera和renderer，如下：

function onResize(){
    camera.aspect = window.innerWidth/window.innerHeight;//相機視角長寬比
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
}

其中updateProjectionMatrix()方法，是相機的一個方法，用以更新相機視角模型。每當瀏覽器畫布窗口大小變化，這個onResize函數就會被觸發，它首先通過window對象獲取了最新的畫布長寬比，並讓相機的視角大小等於該比值，然后啟用updateProjectionMatrix()方法，更醒相機的視角大小,最后，改變renderer的大小，即渲染器的大小（畫布大小）。注意是，修改了相機的aspect視角大小，和畫布的大小，我們一般都會保持相機視角和畫布的長寬比相等，相機是相機，畫布是畫布。

相關代碼如下：

//文件initialization.js
function init() {
    var stats = initStats();
    var renderer = initRenderer();
    var camera = initCamera();
    var scene = new THREE.Scene();
    var clock = new THREE.Clock();

    initDefaultLighting(scene);
    initModel()
    initControls();
    render();
    draw(scene);

    function initModel() {
        //輔助工具
        var helper = new THREE.AxesHelper(900);
        scene.add(helper);
        // var map = new THREE.TextureLoader().load("./assets/jay.jag");
        //外部盒子
        // var material = new THREE.MeshLambertMaterial({
        //     // map: map
        //     color: 0xffffff,
        // });
        // material.transparent = true;
        // material.opacity = 0.4;

        //--------------------------------地板--------------------------
        var planeGeometry = new THREE.PlaneGeometry(1000, 1000, 50, 50);
        var planeMaterial = new THREE.MeshLambertMaterial({
            color: 0xff00000,
            wireframe: true
        });
        planeMaterial.transparent = true;
        planeMaterial.opacity = 0.3;

        plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = -6;
        plane.position.z = 0;


        //告訴底部平面需要接收陰影
        plane.receiveShadow = true;

        scene.add(plane);
        // scene.add(PlaneSegs);
        //--------------------------------地板end-----------------------
    }

    //初始化控制器
    var obtControls; //定義控制器變量
    function initControls() {
        //定義控制器核心           
        obtControls = new THREE.OrbitControls(camera, renderer.domElement);

        // 如果使用animate方法時，將此函數刪除
        // controls.addEventListener('change', render);
        //以下都是為了滿足各種需求的各種控制器配置參數
        obtControls.enableDampling = true; //使動畫循環使用時阻尼或自轉 意思是否有慣性
        obtControls.enableZoom = true; //是否允許縮放
        obtControls.enablePan = true; //是否開啟鼠標右鍵拖拽
        obtControls.autoRotate = false; //是否允許自動旋轉
        obtControls.dampingFactor = 0.25; //動態阻尼系數：就是鼠標拖拽旋轉靈敏度
        obtControls.minDistance = 200; //設置相機距離原點的最近距離；
        obtControls.maxDistance = 1000; //設置相機距離原點的最遠距離；

    }
    //窗口大小變化監聽
    window.addEventListener('resize',onResize,false);

    function onResize(){
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth,window.innerHeight)
    }

    //控制更新
    function render() {
        stats.update();
        // fpControls.update(clock.getDelta());
        obtControls.update(clock.getDelta());
        requestAnimationFrame(render);
        renderer.render(scene, camera)
    }

}

該demo的完整代碼在這里：Link