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();
});
相关推荐
小岛前端2 分钟前
展示!我 Vibe 了一个 Codex HUD
前端·ai编程
在下胡三汉9 分钟前
GLB与GLTF:有什么区别——你应该用哪一个?
3d·gltf
我是大卫17 分钟前
【图】React源码解析-从源码数据结构、执行机制对比、闭包陷阱与最佳实践四个维度,深挖useMemo和useCallback的底层原理
前端·react.js·源码
不一样的少年_18 分钟前
不用 LangChain,手搓 AI Agent:给大模型装上“手”,让它自己读项目文件
前端·人工智能·agent
索西引擎21 分钟前
【React】useState 函数式更新机制:闭包陷阱规避与状态一致性保障分析
前端·react.js·前端框架
玖玥拾22 分钟前
Unity 3D 笔记(八)ScrollRect 滚动视图、NavMesh 自动寻路系统
笔记·3d·unity
anyup28 分钟前
从文本到具身:我给 AI Agent 搭了套实时 3D 交互身体
前端·人工智能·aigc
lichenyang45330 分钟前
给弱模型一本说明书:我把文档规范做成单文件 Skill,也终于分清了 Skill 和 MCP
前端
咖啡无伴侣40 分钟前
Vue3 DOM 异步更新与性能优化全套学习笔记
前端·vue.js
为了摸鱼而战1 小时前
OpenSpec + Superpowers + gstack 三器合一:你的 AI 编程终于可以从"拍脑袋"进化到"流水线"了
前端