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();
});
相关推荐
XIAO·宝27 分钟前
深度学习------YOLOV3
人工智能·深度学习·yolo
康谋自动驾驶33 分钟前
拆解3D Gaussian Splatting:原理框架、实战 demo 与自驾仿真落地探索!
算法·数学建模·3d·自动驾驶·汽车
黑金IT38 分钟前
3D虚拟人模型转换的完整指南
服务器·数据库·3d
lecepin1 小时前
AI Coding 资讯 2025-10-22
前端·javascript·后端
apocalypsx1 小时前
深度学习-卷积神经网络基础
人工智能·深度学习·cnn
BumBle2 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
搞个锤子哟2 小时前
vant4的van-pull-refresh里的列表不在顶部时下拉也会触发刷新的问题
前端
jnpfsoft2 小时前
低代码视图真分页实操:API/SQL 接口配置 + 查询字段避坑,数据加载不卡顿
前端·低代码
HHHHHY2 小时前
使用阿里lowcode,封装SearchDropdown 搜索下拉组件
前端·react.js
前端付豪2 小时前
万事从 todolist 开始
前端·vue.js·前端框架