ThreeJS设置响应式画布

小白菜学前端

已于 2024-11-21 15:34:40 修改

阅读量410

点赞数 6

分类专栏： ThreeJs 文章标签： 3d javascript

于 2024-11-06 16:20:20 首次发布

本文链接：https://blog.youkuaiyun.com/dlmyrt/article/details/143573332

版权

ThreeJs 专栏收录该内容

9 篇文章

订阅专栏

为了使Three.js创建的画布响应式，需要在窗口大小变化时更新相机的宽高比和渲染器的大小。这通常涉及到添加一个事件监听器来监听resize事件，并在事件触发时执行相应的更新函数。

// 设置初始渲染器和相机尺寸
const renderer = new THREE.WebGLRenderer();
const camera = new THREE.PerspectiveCamera(...);

// 添加事件监听器
window.addEventListener('resize', () => {
    // 更新渲染器大小
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    // 更新相机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    
    // 更新相机的投影矩阵
    camera.updateProjectionMatrix();
});

// 将渲染器的DOM元素添加到页面中
document.body.appendChild(renderer.domElement);