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();
});
相关推荐
tedcloud12317 分钟前
taste-skill部署教程:打造个性化AI推荐工作流
服务器·前端·人工智能·系统架构·edge
xinhuanjieyi31 分钟前
html修复游戏种太阳错误
前端·游戏·html
一一哥Sun1 小时前
第06课:Transformer与注意力机制——大模型背后的秘密武器
人工智能·深度学习·transformer
林希_Rachel_傻希希1 小时前
学React治好了我的焦虑症,1小时速通React 前20分钟。
前端·javascript·面试
Cache技术分享1 小时前
435. Java 日期时间 API - Clock 灵活获取当前时间
前端·后端
卡梅德生物科技小能手1 小时前
卡梅德生物科普CD124(IL-4Rα):2型免疫炎症的核心调控靶点
人工智能·经验分享·深度学习
LaughingZhu2 小时前
Product Hunt 每日热榜 | 2026-06-12
人工智能·经验分享·深度学习·神经网络·产品运营
数据门徒2 小时前
神经网络原理 第十一章:植根于统计力学的随机机器和它们的逼近
人工智能·深度学习·神经网络
独泪了无痕2 小时前
Vue3中防御XSS攻击的“特效药”-DOMPurify
前端·vue.js·安全
小小19923 小时前
idea 配置less转化为css
前端·css·less