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();
});
相关推荐
excel6 小时前
JS 正则在多次 test() 时为什么会出现 lastIndex 缓存问题?
前端
IT_陈寒6 小时前
为什么 Java 的 Optional 让我调试到深夜?
前端·人工智能·后端
米丘7 小时前
React 19.x 的 lazy 与 Suspense
前端·javascript·react.js
如果超人不会飞7 小时前
TinyVue Grid 表格 fetchData 完全指南:从入门到精通
前端
kyriewen7 小时前
手写虚拟DOM后,我反问面试官:key为什么不能用index?
前端·react.js·面试
极光代码工作室7 小时前
基于机器学习的二手商品价格预测系统
人工智能·python·深度学习·机器学习
Doris_20237 小时前
说一说ESLint+Prettier生效的原理
前端·设计模式·架构
生成论实验室8 小时前
我们给AI装上了判断力
人工智能·深度学习·语言模型·机器人·自动驾驶
ZC跨境爬虫8 小时前
跟着 MDN 学CSS day_21:(图像溢出控制与表单元素样式定制)
前端·javascript·css·ui·交互
卷帘依旧8 小时前
微前端解决方案-qiankun
前端