可视化应用在线开发灯光效果怎么实现?

灯光对于场景效果有决定性作用,但打灯光是一个很专业的工作,需要些理论知识。ThingJS 提供了一套通用方案,方便您设置灯光效果。

选择在线开发,点击上方工具,选择场景效果;

在灯光配置项下进行调整,在右侧效果实施显示;

配置结束后,点击上方生成代码块,在右侧即可快速生成代码块;

点击上方执行按钮,则会在场景中看到之前设置的效果;

粒子

我们经常需要模拟下雨,下雪的天气,有时也会模拟爆炸,着火等效果。这些效果使用名为粒子系统(particle)的技术来实现。

模拟火的效果:

粒子的真面目是这样的:

火焰效果是系统发射了很多小面片,这些小面片可以贴上图,再配合上旋转,缩放等模拟出各种需要的效果。

ThingJS 提供 ParticleSystem 物体类来实现粒子效果。

var particle = app.create({ type: 'ParticleSystem', url: 'https://thingjs.com/static/particles/fire1' });

删除粒子

particle.destroy();

查看示例

目前我们内置一些粒子效果供您直接调用,可点击在线开发选择代码块进行调用,见下图:

我们正在加紧开发粒子编辑器,很快会推出,让您能更快自行制作出酷炫的效果。

屏幕后期处理

会用 Photoshop 的同学都知道,后期处理可以将一张平淡无奇的图像,通过各种滤镜,处理得美轮美奂。

在 3D 中,其实我们也可以使用类似的技术 —— shader 来进行编程,控制后期效果。比如:

这是未处理的场景:

这是未处理的场景:

但是,编写 shader 是个很艰巨的任务,需要掌握大量 3D 算法知识,还要掌握 shader 语言。

不过没关系,ThingJS 替您准备了很多效果,我们使用 `app.postEffect` 接口来设置。

选择在线开发,点击上方工具,选择场景效果;

选择后期配置,在下方配置项中进行调整,在右侧效果实施显示;

配置结束后,点击上方生成代码块,在右侧即可快速生成代码块;

点击上方执行按钮即可;

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191224A0J5BH00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券