请选择 进入手机版 | 继续访问电脑版
分享
查看: 2553|回复: 0

[分享] thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

[复制链接]

thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

发表于 2019-12-5 15:33:08 来自 分享 阅读模式 倒序浏览
zzv_icon2553 zzr_icon0 查看全部

thingjs平台是物联网可视化开发平台。基于webgl使用Javascript语言进行开发,即使你不是3D开发工程师,没操作过thingjs平台也不要忧心,thingjs入门简单,各种开发文档供大家使用,问题来了,thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果

事实上,无论是哪家,任何家的,如果本身支持H5,都可以。如何实现可视化效果呢?

目前我们使用两种标准前端页面方法进行数据对接,他们是 Ajax 和 WebSocket

背景

ThingJS 提供如下几种方式来控制天空和背景:

  • 使用 app.background 属性设置背景颜色;
    1. app.background = 0xff8844;
    复制代码
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

    取消背景颜色可直接设置:

    1. app.background = null;
    复制代码
  • 使用 app.background 属性也可以设置背景图片;
    1. app.background = '/uploads/wechat/oLX7p0zOGLar_E2BzYn5fn8ZeaDs/file/bg.jpg';
    复制代码

    效果如下:

    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

    取消背景图片可直接设置背景颜色:

    1. app.background = 0x000000;
    复制代码
  • 使用 app.skyBox 属性设置背景天空盒,目前 ThingJS 内置提供 BlueSky , MilkyWay ,Night , CloudySky, White , Dark 这几种天空盒;
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

    取消背景图片可直接设置背景颜色:

    1. app.skyBox = "Night";
    复制代码

    取消效果:

    1. app.skyBox = null;
    复制代码
  • 使用 app.skyEffect 属性设置背景天空盒时间线;
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

    取消背景图片可直接设置背景颜色:

    1. app.skyEffect = {
    2. // 显示光源位置
    3. showHelper: false,
    4. // 光源扩散大小
    5. turbidity: 10,
    6. // 大气散射
    7. rayleigh: 2,
    8. // 时间 [0~24]
    9. time: 17.6,
    10. // 水平角度
    11. beta: 30 };
    复制代码

    取消效果:

    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

    取消背景图片可直接设置背景颜色:

    1. app.skyEffect = null;
    复制代码

    这个设置不仅修改了背景同时也封装了灯光效果,具体参数比较专业,这里不赘述参数意义了。

    注意事项

    当 app.skyBox 和 app.skyEffect 同时生效时会有些问题,需要选取其中一个生效,关闭另一个。

灯光

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

  1. 选择在线开发,点击上方工具,选择场景效果;
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?
  2. 在灯光配置项下进行调整,在右侧效果实施显示;
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?
  3. 配置结束后,点击上方生成代码块,在右侧即可快速生成代码块;
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?
  4. 点击上方执行按钮,则会在场景中看到之前设置的效果;
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

粒子

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

模拟火的效果:

thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

粒子的真面目是这样的:

thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

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

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

  1. var particle = app.create({
  2. type: 'ParticleSystem',
  3. url: 'https://thingjs.com/static/particles/fire1' });
复制代码

删除粒子

  1. particle.destroy();
复制代码

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

thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

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

屏幕后期处理

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

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

这是未处理的场景:

thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

这是未处理的场景:

thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?

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

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

  1. 选择在线开发,点击上方工具,选择场景效果;
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?
  2. 选择后期配置,在下方配置项中进行调整,在右侧效果实施显示;
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?
  3. 配置结束后,点击上方生成代码块,在右侧即可快速生成代码块;
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?
  4. 点击上方执行按钮即可;
    thingjs支不支持萤石云的视频流地址播放?如何实现可视化效果?


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t