開發與維運

ThingJS讓3D燈光管理更容易!

場景中的燈光與真正的燈光不同,它需要在渲染時間上多花功夫,燈光設置越複雜,渲染所花費的時間越多,ThingJS讓燈光管理變簡單。
燈光有助於表達一種情感,或引導觀眾的目光看向具體的位置。燈光能夠反映一種基調,對整個圖像的外觀至關重要。下面教你關於打燈光的技巧,以及輕便的開發方法。
ThingJS提供一套操作簡便的燈光配置項,只要配置結束後,記得點擊生成代碼塊並執行,一套完整的初級燈光效果就出來了。
1.jpg

主燈光

主燈光對象是對主光源的控制代碼,可設置的變量包括陰影、顏色、強度和打燈角度。主光源通常放在四分之三的位置上,位置是從物體的正面轉45度,並從中心線向上轉45度。夜晚的場景很適用於單一的主光源,沒有其他的自然光,其他的地方黑得不見五指,這正符合單一條件的主光源效果。
### 環境光
在主燈光對象之前,還有對環境光、半球光照的配置。這兩種光源均是天然漫反射的光線,在自然環境中這是一種自然的光亮,不至於讓整個環境置於黑箱之中。環境光能夠提高整個場景的亮度。半球光照特地用來補充地面或建築角落裡的光線,柔化陰影或減少陰影區域,符合物聯網可視化場景的需求。

背景光

第二光源對象也需要設置具體的位置和發光對象的顏色,作為主光源的一種補充光源,感覺會更加逼真。事實上,自然的光線很少只有一種光線照明,而是多種顏色的燈光組合,提供一種景深的感覺。
在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;
})

ThingJS把js代碼封裝形成簡單的配置項,讓3D開發更簡單。

Leave a Reply

Your email address will not be published. Required fields are marked *