关于javascript:让对象富有层次开发3D炫酷效果需要什么

39次阅读

共计 1746 个字符,预计需要花费 5 分钟才能阅读完成。

为了让三维场景更加实在,能够增加灯光、粒子和环境色彩等成果,让对象展示富裕档次,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. 点击上方执行按钮即可;

在这根底上开发 3D 炫酷成果,ThingJS 让 3D 开发更简略!

正文完
 0