ThingJS如何开发3D光源呢?仅需配置-开发-运行三个步骤,不到40行代码

具备表明性的天然光是太阳光,人工光几乎能够是任何形式。ThingJS如何开发3D光源呢?很简单。 灯光有助于表达一种情感,或引导观众的目光看向具体的位置。灯光可以反映一种基调,对整个图像的外观相当重要。下面教你关于打灯光的技巧,以及轻便的开发方法。
ThingJS提供一套操做简便的灯光配置项,只要配置结束后,记得点击生成代码块并执行,一套完整的初级灯光效果就出来了。
app

主灯光

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

环境光

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

背景光

第二光源对象也须要设置具体的位置和发光对象的颜色,做为主光源的一种补充光源,感受会更加逼真。事实上,天然的光线不多只有一种光线照明,而是多种颜色的灯光组合,提供一种景深的感受。
在3DMAX中打灯是一个复杂的技巧,真正学会操做很费时间,相对来讲ThingJS就轻量不少,经过提供场景灯光的配置选项,再生成代码块,方便开发人员迅速掌握,层次效果更丰富。
场景灯光经过app.lighting属性设置,难度一星,代码示例以下。对象

var app = new THING.App({  
    url: 'https://www.thingjs.com/static/models/chinesehouse'  
});

app.on('load', function (ev) {  
    app.camera.position = \[18.217000353088125, 16.96513529990897, 11.90387798709408\];  
    app.camera.target = \[-0.92, 2.1, 2.7\];  
})

// 环境光对象  
var ambientLight = {  
    intensity: 0.4,  
    color: '#FFFFFF',  
};  
// 半球光照  
var hemisphereLight = {  
    intensity: 0.5,  
    color: '#FFFFFF',  
    groundColor: '#202020',  
};  
// 主灯光对象  
var mainLight = {  
    shadow: true,  
    intensity: 0.6,  
    color: '#FFFFFF',  
    alpha: 120,  
    beta: 0,  
};  
// 第二光源对象  
var secondaryLight = {  
    shadow: false,  
    intensity: 0,  
    color: '#FFFFFF',  
    alpha: 0,  
    beta: 0,  
};  
// 全局配置  
var config = {  
    ambientLight,  
    hemisphereLight,  
    mainLight,  
    secondaryLight  
}

new THING.widget.Button('调整场景灯光', function () {  
    // 设置灯光  
    app.lighting = config;  
})  

```  
仅需配置-开发-运行三个步骤,不到40行代码,3D开发灯光效果比传统3D更加轻量!