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();
});
相关推荐
苏一恒几秒前
MP4 在 <video> 里,必须全量下载才能起播吗?—— moov、Range 与被误解的 FastStart
前端
charlie1145141915 分钟前
通用GUI编程技术——图形渲染实战(三十七)——D3D11初始化与SwapChain:从零搭建GPU渲染框架
开发语言·c++·3d·图形渲染
Java小卷9 分钟前
低代码并没有过时!可拖拽表单设计器布局思路
前端·低代码
idcu11 分钟前
深入 Lyt.js 响应式系统:Proxy + Signal 双模式
前端
idcu12 分钟前
Vapor Mode 揭秘:无虚拟 DOM 的极致性能
前端
idcu14 分钟前
从 Vue 3 到 Lyt.js:无痛迁移指南
前端
尘世壹俗人15 分钟前
如何检查服务器上消耗资源的程序是那个
服务器·前端·chrome
LIO20 分钟前
Vue Router 进阶:深入用法与最佳实践
前端·vue-router
Hilaku30 分钟前
做了 6 年前端,技术不差却拿不到 Offer?
前端·javascript·程序员
古茗前端团队30 分钟前
钉钉小程序蓝牙打印探索与实践
前端·蓝牙