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();
});
相关推荐
demo007x几秒前
Hermes-Agent 技术架构
前端·后端·agent
Eric.462 小时前
AI漫剧量产Prompt参数实操手册:Stable Diffusion+ComfyUI+OpenClaw通用复制即用配置
人工智能·深度学习·stable diffusion·prompt·ai漫剧
码艺-Alimjan2 小时前
Vue项目源码备份最佳实践:无视node_modules,打包体积仅2MB
前端·javascript·vue.js
隔窗听雨眠2 小时前
esbuild构建工具简介:重新定义前端构建速度的极速打包器
前端
蔓越莓2 小时前
Webpack 常用 Loader +手写Loader
前端·面试
潍坊老登3 小时前
写了一个某音自动刷视频,通过大模型分析视频主题的Android应用
前端
蔓越莓3 小时前
性能优化:webpack打包层面优化
前端·面试
TJHHH.3 小时前
XSS-labs-master
前端·web安全·xss