96. 正投影相机-Canvas尺寸变化

一些应用场景Cnavas画布可能不是固定尺寸,而是变化的。这时候就需要重新设置WebGL渲染器、相机等参数。

前面给大家演示的时候,相机是用的透视投影,下面主要演示下,正投影相机的参数如何随着Canvas画布尺寸的变化而变化。​​​​​​

WebGL渲染器更新Canvas画布尺寸

javascript 复制代码
// onresize 事件会在窗口被调整大小时发生
window.onresize = function () {
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(width, height);
};
javascript 复制代码
window.onresize = function () {
    const width = window.innerWidth-200; //canvas画布宽度
    const height = window.innerHeight-200; //canvas画布高度
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
};

相机参数更新

.aspect属性受到canvas画布宽高度影响,当canvas画布尺寸发生变化的时候,需要更新透视投影相机PerspectiveCamera.aspect属性。

javascript 复制代码
window.onresize = function () {
    // width、height表示canvas画布宽高度
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
};

你预览案例源码中正投影相机代码,可以看到,正投影相机OrthographicCameraleftright属性受到canvas画布宽高比影响,所以需要随着canvas画布更新。

javascript 复制代码
const k = width / height; //canvas画布宽高比
const s = 50; 
//控制left, right, top, bottom范围大小
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);
javascript 复制代码
// Canvas画布跟随窗口变化
window.onresize = function () {
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度
    // 1. WebGL渲染器渲染的Cnavas画布尺寸更新
    renderer.setSize(width, height);
    // 2.1.更新相机参数
    const k = width / height; //canvas画布宽高比
    camera.left = -s*k;
    camera.right = s*k;
    // 2.2.相机的left, right, top, bottom属性变化了,通知threejs系统
    camera.updateProjectionMatrix();
};
相关推荐
西猫雷婶17 小时前
pytorch基本运算-Python控制流梯度运算
人工智能·pytorch·python·深度学习·神经网络·机器学习
Aotman_18 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_61418 小时前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf18 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
寒月霜华18 小时前
机器学习-模型验证
人工智能·深度学习·机器学习
百思可瑞教育18 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失94919 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
Hello123网站19 小时前
Champ-基于3D的人物图像到动画视频生成框架
3d·ai工具
大前端helloworld19 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
max50060019 小时前
基于多元线性回归、随机森林与神经网络的农作物元素含量预测及SHAP贡献量分析
人工智能·python·深度学习·神经网络·随机森林·线性回归·transformer