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

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

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

獨(dú)立搭建晝夜場(chǎng)景再切換

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

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

■封裝切換場(chǎng)景方法如下：

function switchScene(json,callBack){

g3d.dm().clear();

g3d.deserialze(json,callBack)

}

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

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();

}

})

}

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

sceneDofTransitions(true, function() {

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

sceneDofTransitions(false)

})

})

在使用此方案時(shí)需要注意，如果場(chǎng)景本身已經(jīng)具有景深效果，請(qǐng)?jiān)谡{(diào)用動(dòng)畫前記錄原有的景深信息，并在動(dòng)畫結(jié)束后將其恢復(fù)。

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

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

燈光

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

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

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

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

陰影

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

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

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

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

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

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

天空球

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

var sky = new ht.Node();

sky.s({

'shape3d': 'sphere',

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

'shape3d.reverse.flip': true

});

g3d.setSkyBox(sky);

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

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

審核編輯 黃宇