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();
});
相关推荐
Dovis(誓平步青云)8 分钟前
现场问题先关闭还是先验收,建筑任务怎样处理依赖
前端·javascript·数据库·mysql·音视频
用户842981424181012 分钟前
压缩 ≠ 加密:前端代码保护的三层实践与踩坑记录
前端·javascript
前端一课30 分钟前
别把人生过成一场等待退休的倒计时
前端
CENTER SAYS1 小时前
企业400电话办理全流程详解与材料准备(实操向)
前端·crm
:mnong1 小时前
Web 三维可视化技术对比:ParaView Web vs 本项目 wasm + Three.js
前端·webgl·opengl·opencl·科学可视化
Shirley~~1 小时前
three.js的调试面板工具
前端·3d
怕浪猫1 小时前
12个UI组件库,Star最低的下载最多
前端·javascript·面试
溪语流沙1 小时前
【Web全栈进阶】Vue3起步:组件、模板语法、响应式数据
前端·javascript·vue.js·css3
众链网络1 小时前
Agent 重试的工程解法:幂等、断点续跑与熔断怎么落地
java·前端·数据库·人工智能
User_芊芊君子1 小时前
JiuwenSwarm 协同智能体落地金融投研全流程:SwarmFlow 工作流编排与人机交互面板实测(A2UI v0.8 Web 通道适配)
前端·金融·人机交互