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();
});
相关推荐
honkun61 分钟前
vue 表格组件 vxe-table 实实现专业记账凭证编辑表格与自动汇总
前端·javascript·vue.js
前端snow8 分钟前
ai agent ---nest+langchain实现SSE推送信息
前端
IMPYLH10 分钟前
HTML 的 <nav> 元素
前端·html
IT_陈寒20 分钟前
Vue的computed属性差点让我加班到凌晨
前端·人工智能·后端
涛涛ing22 分钟前
一天写1000行被开除,一周写100行反被升职:2026前端的“工作量陷阱”
前端
IMPYLH24 分钟前
HTML 的 <meter> 元素
前端·html
程序员于老七30 分钟前
漫话大模型:先画轮廓再画细节——从 Flow Matching 看生成模型的“殊途同归“
深度学习·大模型·ai编程·diffusion·flowmatching
HYHYLLLL32 分钟前
【2026年】多模态AI在水务场景的应用
人工智能·深度学习·计算机视觉·水务
奔跑的卡卡36 分钟前
不只校验单个接口:基于接口调用图谱的全链路请求合法性校验方案
前端·web安全
fxss1 小时前
免费儿童学习网站推荐!拼音、诗词、成语故事、认知启蒙,孩子需要的,这里全都有!
前端