如何監聽瀏覽器視窗變動達到自適應的目的

在實際專案中，爲了確保渲染內容在視窗大小變化時能夠正確自適應，我們需要監聽 window 的 resize 事件，並更新相機和渲染器的引數。本文將展示如何實現這一功能。

1. 初始化場景、相機和渲染器

首先，我們初始化 Three.js 場景、相機和渲染器。

// 初始化場景
const scene = new THREE.Scene();

// 初始化相機
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 建立一個簡單的幾何體
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

2. 監聽 resize 事件

接下來，我們新增一個事件監聽器，監聽 window 的 resize 事件，並在事件觸發時更新相機的寬高比和渲染器的尺寸。

window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    // 更新相機的寬高比
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    
    // 更新渲染器的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
}

3. 渲染場景

最後，我們設定渲染迴圈，以便在視窗大小變化時重新渲染場景。

function animate() {
    requestAnimationFrame(animate);

    // 新增旋轉動畫
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

4、總結

透過監聽 window 的 resize 事件，我們可以在瀏覽器視窗大小變化時動態調整相機和渲染器的引數，使專案能夠自適應視窗的變化。這種方法對於構建響應式 3D 應用至關重要。