06.threeJs适配浏览器窗口大小

Mooccs

已于 2025-01-26 16:18:29 修改

阅读量76

点赞数 2

分类专栏： thingJs 文章标签： html5 前端 html

于 2025-01-26 16:17:52 首次发布

本文链接：https://blog.csdn.net/NYX_0225/article/details/145369385

版权

thingJs 专栏收录该内容

6 篇文章

订阅专栏

1、监听浏览器resize事件，是否改变浏览器的宽高；

2、如果浏览器的宽高发生改变，相应的该彼岸渲染器画布的宽高以及摄像机的宽高比aspect；

3、更新矩阵空间；

function renderResize() {
  window.addEventListener('resize', () => {
    // 调整渲染器的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    // 更新摄像机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    
    // 更新摄像机的投影矩阵，以使新的宽高比生效
    camera.updateProjectionMatrix();
  });
}