3D仿真教程：ThingJS全套环境搭建方案

在现实世界中，所有物体都不是独立存在的，周围都存在相应环境，常见的环境元素有雨、电、风、光束等，都是3D仿真的主要对象。ThingJS提供了全套环境搭建方案。

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

（一）设置背景颜色
• 使用 app.background 属性设置背景颜色；
app.background = 0xff8844;
取消背景颜色可直接设置：
app.background = null;
• 使用 app.background 属性也可以设置背景图片；
app.background = ‘/uploads/wechat/oLX7p0zOGLar_E2BzYn5fn8ZeaDs/file/bg.jpg’;
效果如下：

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

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

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

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

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

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

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

（三）设置粒子效果
我们经常需要模拟下雨，下雪的天气，有时也会模拟爆炸，着火等效果。这些效果使用名为粒子系统(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 接口来设置。
1.选择在线开发，点击上方工具，选择场景效果；

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

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

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

ThingJS中基于JS代码可以快速添加环境效果，开发者不用重新学习3D开发，只要会JS就能入门

3D仿真教程：ThingJS全套环境搭建方案相关推荐

强化学习快餐教程(1) - gym环境搭建
强化学习快餐教程(1) - gym环境搭建欲练强化学习神功,首先得找一个可以操练的场地. 两大巨头OpenAI和Google DeepMind都不约而同的以游戏做为平台,比如OpenAI的长处是DO ...
linux php环境搭建图文教程,linux php环境搭建教程
1) 安装依赖包yum -y install wget vim pcre pcre-devel openssl openssl-devel \libicu-devel gcc gcc-c++ auto ...
python3.6 django教程_【Python3.6+Django2.0+Xadmin2.0系列教程一】环境搭建及项目创建
由于工作需要,接触了大半年时间的Django+xadmin框架,一直没空对这块对进行相关的梳理.最近在同事的怂恿下,就在这分享下笔者的学习及工作经验吧. 好了,话不多说,下面开始进入正题: 环境需求: ...
手把手教你搭建一个【文件共享平台】系列教程第二话——环境搭建
文章目录本话概要前端前端整体需求前端组件树前端环境搭建后端后端整体需求后端技术路线后端环境搭建下期预告本话概要这一篇博文主要从整体的角度,概述整个文件共享平台前.后端的需求.技 ...
linux php环境搭建教程,linux php环境搭建教程
linux php环境搭建的方法:首先获取相关安装包:然后安装Apache以及mysql:接着修改配置文件"httpd.conf":最后设置环境变量和开机自启,并编译安装PHP即可 ...
OpenCV入门教程之开发环境搭建(Android、C/C++、Python)
文章目录 opencv Android搭建OpenCV开发环境自己写C/C++调用OpenCV实现小编已经在gayhub开源了一个轮子,可直接使用:一个最简单.免搭建的Android OpenCV ...
ionic入门教程第一课--环境搭建和新建ionic项目
最近由于公司项目需要,自学Ionic.在这里做个备忘,也希望能帮到想自学ionic的其他朋友. 一.首先需要安装node.js环境,对于不了解node.js的同学也没有关系, 因为我们有用到的只是no ...
渗透测试入门DVWA 教程1：环境搭建
首先欢迎新萌入坑.哈哈.你可能抱着好奇心或者疑问.DVWA 是个啥? DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演 ...
Linux基础篇① （Linux介绍；VM和CentOS详细安装教程；工具环境搭建，配置；Linux目录结构）
目录第一章 Linux入门 1.1 Linux应用领域 1.1.1 个人桌面领域的应用 1.1.2 服务器领域 1.1.3 嵌入式领域 1.2 Linux介绍 1.2.1 linux概述 1.3 L ...

3D仿真教程：ThingJS全套环境搭建方案

3D仿真教程：ThingJS全套环境搭建方案相关推荐

最新文章

热门文章