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();
});
相关推荐
June bug几秒前
【Vue】EACCES: permission denied 错误
前端·javascript·vue.js
陈随易2 分钟前
PostgreSQL v18发布,新增AIO uuidv7 OAuth等功能
前端·后端·程序员
一只小阿乐6 分钟前
react 中的组件性能优化
前端·javascript·react.js·react组件性能优化
柯南二号11 分钟前
【大前端】【iOS】iOS 真实项目可落地目录结构方案
前端·ios
肉清17 分钟前
linux自用命令
linux·服务器·前端
中科米堆21 分钟前
自动化大尺寸批量3D检测,自动化三维扫描系统实现钢板支架在线检测-中科米堆CASAIM
运维·3d·自动化·3d全尺寸检测
weibkreuz24 分钟前
初始React@1
前端·react.js·前端框架
Lun3866buzha29 分钟前
【深度学习】【目标检测】改进YOLOv11香烟包装识别与分类_CSP-PTB优化
深度学习·yolo·目标检测
Coder_Boy_35 分钟前
前端和后端软件系统联调经典问题汇总
java·前端·驱动开发·微服务·状态模式
小皮虾39 分钟前
别再封装 Axios 了!用 RPC 像调用本地函数一样写接口(支持 Vue/React/Node)
前端·rpc·全栈