创建仿真效果超轻松!ThingJS的环境与效果有多酷

简介: 特殊的环境效果能够烘托场景氛围,增加真实感

特殊的环境效果能够烘托场景氛围,增加真实感,让物联网项目更加直观,ThingJS提供基础的环境效果设置方法,让开发者在熟悉的JS语言上增加更多炫酷功能!

如何控制环境与效果?ThingJS 提供4种方式来控制天空和背景:
 如何设置背景颜色
 如何设置灯光效果
 如何设置粒子效果
 如何进行幕后处理

(一)设置背景颜色
• 使用 app.background 属性设置背景颜色;
app.background = 0xff8844;
1.png

取消背景颜色可直接设置:
app.background = null;
• 使用 app.background 属性也可以设置背景图片;
app.background = '/uploads/wechat/oLX7p0zOGLar_E2BzYn5fn8ZeaDs/file/bg.jpg';
效果如下:
2.png

取消背景图片可直接设置背景颜色:
app.background = 0x000000;
• 使用 app.skyBox 属性设置背景天空盒,目前 ThingJS 内置提供 BlueSky , MilkyWay ,Night , CloudySky, White , Dark 这几种天空盒;
3.png

取消背景图片可直接设置背景颜色:
app.skyBox = "Night";
取消效果:
app.skyBox = null;
• 使用 app.skyEffect 属性设置背景天空盒时间线;
4.png

取消背景图片可直接设置背景颜色:
app.skyEffect = {
// 显示光源位置
showHelper: false,
// 光源扩散大小
turbidity: 10,
// 大气散射
rayleigh: 2,
// 时间 [0~24]
time: 17.6,
// 水平角度
beta: 30
};
取消效果:

5.png

取消背景图片可直接设置背景颜色:
app.skyEffect = null;
这个设置不仅修改了背景同时也封装了灯光效果,具体参数比较专业,这里不赘述参数意义了。
注意事项
当 app.skyBox 和 app.skyEffect 同时生效时会有些问题,需要选取其中一个生效,关闭另一个。
(二) 设置灯光效果
灯光对于场景效果有决定性作用,但打灯光是一个很专业的工作,需要些理论知识。ThingJS 提供了一套通用方案,方便您设置灯光效果。
1.选择在线开发,点击上方工具,选择场景效果;

6.png

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

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

8.png

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

9.png

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

10.png

粒子的真面目是这样的:

11.png

火焰效果是系统发射了很多小面片,这些小面片可以贴上图,再配合上旋转,缩放等模拟出各种需要的效果。
ThingJS 提供 ParticleSystem 物体类来实现粒子效果。
var particle = app.create({

type: 'ParticleSystem', 
url: 'https://thingjs.com/static/particles/fire1' 

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

12.png

我们正在加紧开发粒子编辑器,很快会推出,让您能更快自行制作出酷炫的效果。
(四)进行屏幕后期处理
会用 Photoshop 的同学都知道,后期处理可以将一张平淡无奇的图像,通过各种滤镜,处理得美轮美奂。
在 3D 中,其实我们也可以使用类似的技术 —— shader 来进行编程,控制后期效果。比如:
这是未处理的场景:

13.png

这是未处理的场景:

14.png

但是,编写 shader 是个很艰巨的任务,需要掌握大量 3D 算法知识,还要掌握 shader 语言。
不过没关系,ThingJS 替您准备了很多效果,我们使用 app.postEffect 接口来设置。
1.选择在线开发,点击上方工具,选择场景效果;

15.png

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

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

17.png

4.点击上方执行按钮即可;

开发者请参考ThingJS 的161个官方示例和十万个三维场景资源,创建仿真效果很轻松!

相关文章
|
6月前
|
数据可视化 Linux 算法框架/工具
【项目--Hi3559A】Hi3559A平台仿真功能操作介绍
【项目--Hi3559A】Hi3559A平台仿真功能操作介绍
65 2
|
6月前
|
算法
LabVIEW开发仿真转矩加载系统
LabVIEW开发仿真转矩加载系统
32 0
|
6月前
|
传感器 数据采集
LabVIEW开发航天器动力学与控制仿真系统
LabVIEW开发航天器动力学与控制仿真系统
47 0
|
6月前
|
数据可视化
Lorenz系统仿真动态可视化
Lorenz系统仿真动态可视化
|
监控 安全 Java
3D孪生场景搭建:模拟仿真
模拟仿真可能更多地依赖用户输入的参数和条件,其准确性和适用性在很大程度上取决于这些输入的准确性和假设的合理性。因此,在使用仿真时需要格外注意输入参数的选择和精确性。
164 0
|
监控 内存技术
博途软件PLCSIM仿真工具如何使用S7-1500 PLC仿真功能?
针对博途软件,西门子重新开发了PLCSIM,有了这个仿真工具我们就无需使用真实硬件,而可以对所编的程序进行仿真和调试。除此之外PLCSIM还增加了许多功能,比如说顺序控制的仿真。在今后的学习过程中我们会经常使用到PLCSIM,本节我们以S7-1500 PLC仿真功能为例,来介绍一下PLCSIM的操作和使用。
博途软件PLCSIM仿真工具如何使用S7-1500 PLC仿真功能?
|
传感器 数据可视化 机器人
ROS中阶笔记(四):机器人仿真—Gazebo物理仿真环境搭建(重点)
ROS中阶笔记(四):机器人仿真—Gazebo物理仿真环境搭建(重点)
2011 0
ROS中阶笔记(四):机器人仿真—Gazebo物理仿真环境搭建(重点)
|
机器人
《机器人自动化:建模、仿真与控制》——2.2 图形表示
本节书摘来自华章计算机《机器人自动化:建模、仿真与控制》一书中的第2章,第2.2节,作者[法]吕克·若兰(Luc Jaulin),译 黄心汉 彭刚,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1090 0
|
机器人 测试技术
《机器人自动化:建模、仿真与控制》——第2章 仿真
本节书摘来自华章计算机《机器人自动化:建模、仿真与控制》一书中的第2章,作者[法]吕克·若兰(Luc Jaulin),译 黄心汉 彭刚,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1042 0
下一篇
无影云桌面