圖撲軟件 HT 的案例中有許多白天黑夜效果。這種效果在各類不同的項目中得到了廣泛的應(yīng)用和認可。

白天黑夜效果是視覺設(shè)計和交互設(shè)計中常見的一種手法。通過細致巧妙地調(diào)整色彩、亮度、對比度等視覺參數(shù)，即可成功模擬出場景從白天逐漸過渡到黑夜的變化。不僅能顯著增強用戶的視覺體驗，提高設(shè)計的吸引力和美感，還能賦予空間或界面一種動感和生命力，使整個應(yīng)用或網(wǎng)站呈現(xiàn)出更加生動和富有層次感的表現(xiàn)。

切換白天與黑夜的方案主要有 2 種：

獨立搭建晝夜場景再切換

分別做好白天和黑夜的場景再進行切換，通常適用于需要精細操作及控制的場合。例如為了確保每個時間段的光影效和環(huán)境細節(jié)都達到優(yōu)質(zhì)狀態(tài)，開發(fā)者可以分別針對白天和黑夜設(shè)計不同的場景。盡管這種方式較為耗時，但它能提供更精細和個性化的視覺效果。在實際切換過程中，可以通過淡入淡出或瞬間轉(zhuǎn)換等方式，營造出更為逼真的時間變化體驗。

以下案例展示了通過景深淡入淡出的方式，實現(xiàn)白天與黑夜過渡切換的效果。

■封裝切換場景方法如下：

function switchScene(json,callBack){

g3d.dm().clear();

g3d.deserialze(json,callBack)

}

■設(shè)置一張不透明景深貼圖，將景深 aperture 孔徑設(shè)置為 0，做景深過度動畫：

function sceneDofTransitions(isToDeep, callBack){

g3d.enablePostProcessing("Dof", true);

var module = g3d.getPostProcessingModule('Dof');

module.image = '不透明景深.png';

var toAperture = isToDeep ? 1 : 0;

var range = toAperture - (module .aperture),

beginAperture = module .aperture ;

ht.Default.startAnim({

duration: 1e3,

easing(t) {return t},

action(v, t) {

module.aperture = beginAperture + (range * v)

g3d.iv();

},

finishFunc() {

callBack && callBack();

}

})

}

■在切換場景之前，先調(diào)用景深動畫，將景深調(diào)整到最不透明的狀態(tài)。在動畫回調(diào)后，再進行場景切換。切換完成后，再將景深調(diào)整為最透明狀態(tài)。

sceneDofTransitions(true, function() {

switchScene(json,function(json, dm, view, datas) {

sceneDofTransitions(false)

})

})

在使用此方案時需要注意，如果場景本身已經(jīng)具有景深效果，請在調(diào)用動畫前記錄原有的景深信息，并在動畫結(jié)束后將其恢復。

調(diào)整視覺元素實現(xiàn)晝夜切換

通過綜合調(diào)整燈光、陰影和天空球，可以模擬光影的變化，實現(xiàn)白天到夜晚的自然過渡，使整個場景更加生動逼真。通過精細調(diào)控這些元素，能夠使得虛擬場景更加真實，引人入勝。

燈光

在場景中，默認存在一個頭燈。在實現(xiàn)白天和黑夜的過渡過程中，首先需要調(diào)整燈光的強度和顏色。白天的燈光通常較為明亮，并呈現(xiàn)溫暖的黃色或白色，以模擬太陽光的效果。到了夜晚，燈光的強度應(yīng)當減弱，并轉(zhuǎn)為冷色調(diào)的藍色或紫色，以模擬月光和星光的效果。

g3d.setHeadlightDisabled(false);//開啟頭燈

g3d.setHeadlightColor(color);//設(shè)置頭燈顏色

g3d.setHeadlightIntensity(intensity);//頭燈強度

陰影

陰影的表現(xiàn)形式也至關(guān)重要。白天的陰影較為清晰且銳利，能夠很好地表現(xiàn)出物體的立體感。而夜晚的陰影則應(yīng)更加柔和和模糊，以模擬夜間的淺淺光照和暗淡環(huán)境。通過調(diào)節(jié)陰影的清晰度和軟化程度，可以實現(xiàn)場景在白天和夜晚之間的自然過渡。

g3d.enableShadow();//開啟陰影

g3d.setShadowIntensity(intensity);//陰影強度值

g3d.setShadowRadius(radius);// 陰影柔化半徑

g3d.setShadowDegreeX(degreeX);//陰影在X軸方向上的角度

g3d.setShadowDegreeZ(degreeZ);//陰影在Z軸方向上的角度

天空球

除了上述兩個要素之外，天空球的色彩和紋理是模擬晝夜變化的關(guān)鍵要素。白天的天空球通常呈現(xiàn)明亮的藍色，并帶有動態(tài)的云朵，效果生動且富有層次感。夜晚的天空球則變?yōu)樯铄涞暮谏蛏钏{色，上面點綴著閃爍的星光，進而營造出神秘而寧靜的夜晚氛圍。

var sky = new ht.Node();

sky.s({

'shape3d': 'sphere',

'shape3d.image': '天空球貼圖.jpg',

'shape3d.reverse.flip': true

});

g3d.setSkyBox(sky);

通過結(jié)合上述元素，可以實現(xiàn)白天到夜晚的自然過渡。在進行這些調(diào)整時，可以利用動畫來修改數(shù)值，從而平滑展示白天到夜晚的變化過程，提升用戶的沉浸體驗。

通過白天黑夜效果，使用戶在不同時間段都能體驗到獨特的場景變化，大幅提升交互體驗和用戶參與度。此外，合理運用白天黑夜效果還能增強場景的沉浸感，使用戶在使用過程中感受到時光流轉(zhuǎn)的自然變化，進一步拉近虛擬世界與現(xiàn)實世界的距離。

審核編輯 黃宇