创建仿真效果超轻松!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个官方示例和十万个三维场景资源,创建仿真效果很轻松!

相关文章
|
前端开发 数据可视化 API
顶级好用的 React 表单设计生成器,可拖拽生成表单
React 前端开发中,表单组件是排在前三的高频使用的组件,如何快速构建表单,节省力气,避免重复造轮子呢,选择一款适合自己的前端表单设计生成器就非常重要了。本文介绍 3 款顶级好用的 React 表单设计器,其中最后一款卡拉云,是新一代低代码开发工具,不仅能自动生成各类表单,还可以拖拽生成其他常见的前端组件,一行代码连接前后端数据,可快速接入数据库/api。它是表单设计器的超集,可直接生成属于你的后台管理工具,无敌好用。
4122 0
|
前端开发 JavaScript 小程序
7 款最棒的开源 React UI 库测评 - 特别针对国内使用场景推荐
优秀的 React UI 组件库,帮我们节省开发时间,提高开发效率,统一设计语言。更棒的是内置的功能复杂,我们自己很难处理的常用组件,比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等,再进一步,还有帮我们把组件的轮子装好的 React admin 后台管理系统。本文推荐 7 款适用于中文使用者习惯的开源 React UI 库,特别针对国内使用场景推荐。
1695 0
|
2月前
|
前端开发 JavaScript 定位技术
支持省市区县乡镇村GeoJSON 在线预览编辑下载器开源:一个纯前端实现的拆解
这是一个纯前端、零依赖的GeoJSON轻量预览编辑器,支持本地打开、WGS84坐标渲染、要素查看/编辑,并可导出为GeoJSON/KML/SVG/CSV/PNG。数据不上传,双击index.html即用,开箱即用,适合快速验图、格式转换与二次集成。
|
8月前
|
存储 新零售 人工智能
【云故事探索】 NO.21 | 良品铺子:70TB 核心数据“闪电”上云,重塑零食帝国的数字底座
本期,我们走进零售行业领军者——良品铺子,聆听他们如何将运行十年的核心系统搬上云端,打造更智能的“零食帝国”。
|
4月前
|
存储 缓存 API
[鸿蒙从零到一] HarmonyOS 后台任务与定时能力实战:短时任务、长时任务与延迟调度
本文系统讲解HarmonyOS后台任务实战,涵盖短时任务(收尾保护)、长时任务(用户可感知持续运行)、延迟任务(Work Scheduler按条件调度)及代理提醒(准时通知),结合ArkTS代码、权限配置、异常处理与测试要点,助开发者构建稳定、合规、低耗的后台能力
381 0
|
5月前
|
Web App开发 弹性计算 文字识别
Qwen3.7-Plus:想得深,看得懂,做得到
阿里发布Qwen3.7-Plus:全球前五、中国第一的多模态智能体模型,实现“看懂界面—生成代码—操作GUI—自主验证”闭环,11小时端到端开发APP,支持视觉编程、搜索增强问答与真实场景推理。
1121 0
|
存储 关系型数据库 MySQL
浅谈Elasticsearch的入门与实践
本文主要围绕ES核心特性:分布式存储特性和分析检索能力,介绍了概念、原理与实践案例,希望让读者快速理解ES的核心特性与应用场景。
1457 15
|
5月前
|
人工智能 自然语言处理 数据可视化
阿里云万小智完整快速建站实操步骤(小白零代码版)
万小智是阿里云基于通义大模型打造的企业级AI建站平台,专为中小企业及创业者设计,无需代码与设计基础,1分钟生成适配多端的网站,支持智能客服、SEO优化与一键发布,助力零门槛快速上线!
1251 0
|
11月前
|
人工智能 JavaScript 前端开发
深度解构:当 AI 滤镜撞上“指尖”墙——为什么大厂玩不转高精度 AR 试戴?
本文深入剖析虚拟美甲与美瞳背后的AR技术壁垒,从“贴图”到物理级渲染,揭示PBR材质、高精度追踪与菲涅尔效应的实现原理,并通过Perfect Corp V2 API代码实战,展现如何构建真实感试戴体验。
548 0
|
10月前
|
人工智能 自然语言处理 数据挖掘
2026年数据分析工具推荐,让数据真正为企业所用
2026年,“数据要素价值释放年”全面落地,AI驱动型BI工具需求激增。阿里云瓴羊Quick BI凭借原生AI助手“智能小Q”,实现自然语言查询、自动归因、预测模拟与一键报告,支持湖仓一体架构与细粒度安全管控,覆盖零售、制造、金融等多行业。其全链路适配、低门槛全员用数及灵活计费体系,使其成为企业数据驱动转型的首选工具。(239字)