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();
});
相关推荐
kyle~17 分钟前
Swagger ---基于 描述文件 生成 交互式API文档 的工具
前端·后端·规格说明书·说明文档
不羁的木木8 小时前
HarmonyOS APP实战-基于Image Kit的图像处理APP - 第6篇:图片滤镜效果实现
图像处理·深度学习·harmonyos
世界哪有真情9 小时前
拿人类意识卡 AI?等于用 bug 验收正式产品
前端·人工智能·后端
cd_949217219 小时前
为什么AI3D创作中贴图材质尤为重要?因为它决定模型能否成为可用资产
人工智能·3d·贴图
Listen·Rain10 小时前
Vue3:setup详解
前端·javascript·vue.js
Patrick_Wilson10 小时前
修好 bug 只是开始:一次由监控需求反向重构日志结构的复盘
前端·监控·数据可视化
kyriewen11 小时前
面试官让我优化一个卡死的表格,我打开 Claude 五秒重写,他放下咖啡问我要不要来当组长
前端·javascript·面试
CCC:CarCrazeCurator11 小时前
A100作为深度学习基础计算节点的原因
人工智能·深度学习
hhzz11 小时前
Barbershop:基于GAN和分割Mask的图像合成技术——从理论到实战全解析
图像处理·人工智能·python·深度学习·计算机视觉
小粉粉hhh11 小时前
React(二)——dom、组件间通信、useEffect
前端·javascript·react.js