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();
});
相关推荐
a1117761 天前
个人展示页面(html 线条交互)
前端·开源·html
笨蛋不要掉眼泪1 天前
Spring Cloud Gateway 核心实战:断言(Predicate)的长短写法与自定义工厂详解
java·前端·微服务·架构
RichardLau_Cx1 天前
零依赖!纯前端 AI 辅助病例管理系统 aiCaseManage:无后端也能实现诊疗行为核验
前端·人工智能·前端开发·localstorage·医疗科技·ai辅助开发·零依赖项目
qq_24218863321 天前
AI内容审核系统(简化版实现)
人工智能·深度学习·目标检测
多恩Stone1 天前
【3D-AICG 系列-13】Trellis 2 的 SC-VAE 的 Training Loss 细节
人工智能·算法·3d·aigc
Never_Satisfied1 天前
在HTML & CSS中,CSS选中第二个指定类型的子元素的方法
前端·css·html
木斯佳1 天前
前端八股文面经大全:字节跳动前端一面(2025-10-09)·面经深度解析
前端·状态模式
Never_Satisfied1 天前
在HTML & CSS中,图片嵌入文字方法
前端·css·html
huohaiyu1 天前
从URL到页面的完整解析流程
前端·网络·chrome·url
阿星AI工作室1 天前
一个简单Demo彻底理解前后端怎么连的丨Figma + Supabase + Vercel
前端·人工智能