可编辑的Lighting and React dat.GUI

我的待办事项清单上最重要的一件事就是能够编辑战斗地图的照明。

到现在为止,所有战斗地图都具有相同的照明配置,并且已经过硬编码。 我只是为了确保灯光能够正常工作而放在那里。

几周前,在使用2D战斗UI之后,我决定要更改此设置,但是我需要一个不错的GUI才能做到。 绝对需要带滑块的东西,因为在3D空间中使用等距相机,很难快速了解场景中对象的状况。 最好的结果是我可以疯狂地玩弄直到得到想要的外观,然后保存它。

React dat.GUI

我从三个不同的演示中寻找了很多灵感,当然还记得dat.GUI,它是Google的出色的小GUI应用,几乎用于每个WebGL演示。 它非常适合我的用例。 不过有一个问题,它是前一段时间制作的,尽管代码编写得很好,但仍然是普通的JavaScript和jQuery。 这在React上效果不佳,因此我在GitHub上进行了快速搜索,发现有人已经启动了React端口。 代码看起来不错并且很坚固,所以我将其分叉并完成了。

完成此操作后,将其安装到引擎中只是小菜一碟,我很快就开始研究LightEditor组件。 最终结果如下所示:

当前,场景中有三盏灯,一个环境灯,一个定向灯和一个点灯。 这些可以随意移动和配置,但我喜欢,我还可以更改光源的颜色,当与背景渐变配对时,可以产生一些非常甜美的氛围。

我对这个结果感到非常满意,我认为下一步将回到TileEditor并提供dat.GUI处理,以便我可以更快地创建关卡。 我一直都在厌倦使用同一级别的内容,因此我可能会尝试使用改进的编辑工具来创建一个新级别。

直到下一次!