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();
});
相关推荐
aq55356004 分钟前
HTML头部元信息避坑指南
前端·html
A923A13 分钟前
Vue 和 React 常用脚手架工具总结
前端·vue.js·react.js·脚手架
skywalk816313 分钟前
CherryStudioWeb:一个优雅的 AI 聚合导航页,让你在一个页面访问所有主流 AI 服务。
前端·css·人工智能·html
Highcharts.js16 分钟前
步骤总结|使用 React + Highcharts 实现动态更新图表
前端·javascript·react.js·前端框架·highcharts·图表渲染
~ rainbow~16 分钟前
前端转型全栈(五)——NestJS 文件上传功能开发复盘
前端·全栈
木斯佳16 分钟前
前端八股文面经大全:来未来前端实习一面(2026-04-17)·面经深度解析
前端·校招·实习
郝学胜-神的一滴19 分钟前
深度学习入门:极简神经网络搭建与参数计算全攻略
人工智能·pytorch·python·深度学习·神经网络·机器学习
重生之我要成为代码大佬19 分钟前
pytorch与视觉检测
人工智能·pytorch·深度学习·大模型·视觉检测
高洁0132 分钟前
计算机视觉实战:图像去噪模型训练与应用
人工智能·python·深度学习·机器学习·transformer