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();
});
相关推荐
szarron7 分钟前
VNA6 便携式矢量网络分析仪|1MHz‑6.3GHz 手持 VNA 真实应用场景全解析
前端·嵌入式硬件·信息可视化·数据挖掘·数据分析
Reisentyan8 分钟前
B站首页,点击视频卡片之后首页自动刷新的问题
前端
默_笙16 分钟前
🚕 缺料就出门买:给 RAG 装上"信息够不够"的判断力
前端·javascript
阿明617 分钟前
小白深度学习基础【AI】
人工智能·深度学习
梦帮科技32 分钟前
万亿 Token 工业级语料洗炼:MinHash LSH 兆级去重、语义纯化与元提示词泄漏绝对阻断
人工智能·深度学习·神经网络·生成对抗网络·自然语言处理·数据挖掘
Liora_Yvonne32 分钟前
同样用 Element Plus,为什么你的后台总有一股“模板味”?
前端
葡萄城技术团队37 分钟前
用 Sheet 页导航视图管理复杂 SpreadJS 工作簿
前端
志尊宝40 分钟前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发
Caroline5161 小时前
GPT Image 2.5还能这么玩!一套提示词生成IP吉祥物,附完整案例
前端·gpt·tcp/ip
wangyadong3171 小时前
# el-table 复选框无法选中问题记录
前端·javascript·vue.js