112. gui辅助调节光源阴影

光源阴影范围,也可以通过GUI界面可视化调节,这样更形象。

阴影范围可视化调节

  • 根据工厂尺寸数量级预先设置.shadow.camera,然后通过GUI调试选择一个合适的值
  • .shadow.camera的位置通过光源的位置调试。
  • .shadow.camera参数改变后,注意执行cameraHelper.update();更新
javascript 复制代码
// 阴影子菜单
const shadowFolder = gui.addFolder('平行光阴影');
const cam = directionalLight.shadow.camera;
// 相机left、right等属性变化执行.updateProjectionMatrix();
// 相机变化了,执行CameraHelper的更新方法.update();
shadowFolder.add(cam,'left',-500,0).onChange(function(v){
    cam.updateProjectionMatrix();//相机更新投影矩阵
    cameraHelper.update();//相机范围变化了,相机辅助对象更新
});

其他参数类似设置

javascript 复制代码
shadowFolder.add(cam,'right',0,500).onChange(function(v){
    cam.updateProjectionMatrix();
    cameraHelper.update();
});
shadowFolder.add(cam,'top',0,500).onChange(function(v){
    cam.updateProjectionMatrix();
    cameraHelper.update();
});
shadowFolder.add(cam,'bottom',-500,0).onChange(function(v){
    cam.updateProjectionMatrix();
    cameraHelper.update();
});
shadowFolder.add(cam,'far',0,1000).onChange(function(v){
    cam.updateProjectionMatrix();
    cameraHelper.update();
});
相关推荐
chsmiao5 小时前
深度学习之线性代数
人工智能·深度学习·线性代数
ct9786 小时前
组件间的通信
前端·javascript·vue.js
左手吻左脸。6 小时前
Vue 全栈面试题大全(2026 最新版最详细)
前端·javascript·vue.js
Aphasia3116 小时前
手写KeepAlive组件
前端·react.js·面试
两个西柚呀6 小时前
js中的同步和异步,三种处理异步任务的方式
前端·javascript
pe7er7 小时前
软件设计不要“既要又要”
前端·后端·架构
kyriewen7 小时前
从Webpack到Vite:我们迁移了一个10万行代码的项目,总结了这7个坑
前端·webpack·vite
HyperAI超神经7 小时前
MiniCPM5-1B采用RL+OPD训练,多项复杂任务达SOTA;面向复杂医疗业务自动化:医疗智能体评测数据集 CHI-Bench
人工智能·深度学习·ai·计算化学
一个王同学7 小时前
从零到一 | CV转多模态大模型 | week12 | 整理 MiniLLaVA 工程与文档
人工智能·深度学习·算法·机器学习·计算机视觉
IT_陈寒7 小时前
Java Stream并行流的坑:我花了3小时才找到的线程安全问题
前端·人工智能·后端