threejs画布尺寸和布局 学习笔记

js yekong

threejs渲染输出的结果就是一个Cavnas画布,canvas画布也是HTML的元素之一,这意味着three.js渲染结果的布局和普通web前端习惯是一样的。
通过renderer.domElement属性可以访问threejs的渲染结果,也就是HTML的元素 canvas
画布。

canvas画布宽高度动态变化,需要更新相机和渲染的参数,否则无法正常渲染。

// onresize 事件会在窗口被调整大小时发生
window.onresize = function () {
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
// 全屏情况下:设置观察范围长宽比aspect为窗口宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
// 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatri
// 但是不会每渲染一帧,就通过相机的属性计算投影矩阵(节约计算资源)
//如果相机的一些属性发生了变化,需要执行updateProjectionMatrix()方法更新
    camera.updateProjectionMatrix();
}

喜欢