分享
查看: 1548|回复: 0

[分享] ThingJS让你的3D开发样样通,快速开发3D项目!

[复制链接]

ThingJS让你的3D开发样样通,快速开发3D项目!

发表于 2020-9-14 18:06:39 来自 分享 阅读模式 倒序浏览
zzv_icon1548 zzr_icon0 查看全部

在3D制作中灯光的应用极为重要,巧妙地应用光影效果能够将观众的想象带入亦真亦幻的化境。ThingJS让3D开发轻量化,灯光效果一样不缺。

灯光有助于表达一种情感,或引导观众的目光看向具体的位置。灯光能够反映一种基调,对整个图像的外观至关重要。下面教你关于打灯光的技巧,以及轻便的开发方法。

ThingJS提供一套操作简便的灯光配置项,只要配置结束后,记得点击生成代码块并执行,一套完整的初级灯光效果就出来了。

ThingJS让你的3D开发样样通,快速开发3D项目!

主灯光

主灯光对象是对主光源的控制代码,可设置的变量包括阴影、颜色、强度和打灯角度。主光源通常放在四分之三的位置上,位置是从物体的正面转45度,并从中心线向上转45度。夜晚的场景很适用于单一的主光源,没有其他的自然光,其他的地方黑得不见五指,这正符合单一条件的主光源效果。

环境光

在主灯光对象之前,还有对环境光、半球光照的配置。这两种光源均是天然漫反射的光线,在自然环境中这是一种自然的光亮,不至于让整个环境置于黑箱之中。环境光能够提高整个场景的亮度。半球光照特地用来补充地面或建筑角落里的光线,柔化阴影或减少阴影区域,符合物联网可视化场景的需求。

背景光

第二光源对象也需要设置具体的位置和发光对象的颜色,作为主光源的一种补充光源,感觉会更加逼真。事实上,自然的光线很少只有一种光线照明,而是多种颜色的灯光组合,提供一种景深的感觉。

在3DMAX中打灯是一个复杂的技巧,真正学会操作很费时间,相对来说ThingJS就轻量很多,通过提供场景灯光的配置选项,再生成代码块,方便开发人员迅速掌握,层次效果更丰富。

场景灯光通过app.lighting属性设置,难度一星,代码示例如下。

  1. var app = new THING.App({
  2. url: 'https://www.thingjs.com/static/models/chinesehouse'
  3. });
  4. app.on('load', function (ev) {
  5. app.camera.position = [18.217000353088125, 16.96513529990897, 11.90387798709408];
  6. app.camera.target = [-0.92, 2.1, 2.7];
  7. })
  8. // 环境光对象
  9. var ambientLight = {
  10. intensity: 0.4,
  11. color: '#FFFFFF',
  12. };
  13. // 半球光照
  14. var hemisphereLight = {
  15. intensity: 0.5,
  16. color: '#FFFFFF',
  17. groundColor: '#202020',
  18. };
  19. // 主灯光对象
  20. var mainLight = {
  21. shadow: true,
  22. intensity: 0.6,
  23. color: '#FFFFFF',
  24. alpha: 120,
  25. beta: 0,
  26. };
  27. // 第二光源对象
  28. var secondaryLight = {
  29. shadow: false,
  30. intensity: 0,
  31. color: '#FFFFFF',
  32. alpha: 0,
  33. beta: 0,
  34. };
  35. // 全局配置
  36. var config = {
  37. ambientLight,
  38. hemisphereLight,
  39. mainLight,
  40. secondaryLight
  41. }
  42. new THING.widget.Button('调整场景灯光', function () {
  43. // 设置灯光
  44. app.lighting = config;
  45. })
复制代码


ThingJS让你的3D开发样样通,快速开发3D项目!


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

本版积分规则

130700ppkpl8x3t7tt1b1t