您好,登錄后才能下訂單哦!
今天小編給大家分享一下如何利用Three.js制作一個(gè)新聞聯(lián)播開(kāi)頭動(dòng)畫(huà)的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
選用vite
作為構(gòu)建工具;
選用three.js
作為三維庫(kù);
選用tween.js
作為動(dòng)畫(huà)庫(kù)(three.js
包里自帶一個(gè),不需要額外安裝)
其他就沒(méi)了,就這么簡(jiǎn)單。
已經(jīng)忘記新聞聯(lián)播片頭的小伙伴可以搜一下視頻去回顧下。
我將片頭場(chǎng)景中出現(xiàn)的物體分為這幾個(gè):
背景音樂(lè)
背景圖:宇宙背景,有往外飛的射線(xiàn)和氤氳的氣
地球:從右下角飛到畫(huà)面正中間,不斷旋轉(zhuǎn),地球上方的云比地球轉(zhuǎn)得略慢
紅綠藍(lán)三條色帶:從畫(huà)面的三個(gè)角依次往對(duì)角線(xiàn)飛過(guò)
出現(xiàn)的三維文字:其實(shí)分為四段,依次有動(dòng)畫(huà),到文字章節(jié)的時(shí)候細(xì)說(shuō)
有了場(chǎng)景分解后,我們只要去寫(xiě)對(duì)應(yīng)的代碼就可以了。通過(guò)three.js代碼生成相應(yīng)物體,并且使用tween.js給物體配上對(duì)應(yīng)的補(bǔ)間動(dòng)畫(huà),達(dá)到整個(gè)場(chǎng)景的運(yùn)動(dòng)效果。
值得注意的是,該項(xiàng)目中所有動(dòng)畫(huà)都是連貫播放的,所以需要將應(yīng)用到的素材都提前加載好,不然會(huì)出現(xiàn)物體一開(kāi)始是黑色的,運(yùn)動(dòng)了一會(huì)兒才有貼圖這種情況。
我們按照以上邏輯,預(yù)先建好各個(gè)js文件:
bg.js
負(fù)責(zé)創(chuàng)建背景
preload.js
負(fù)責(zé)預(yù)加載資源
initThree.js
負(fù)責(zé)初始化三維場(chǎng)景
rgb.js
負(fù)責(zé)創(chuàng)建紅綠藍(lán)色條色帶及其動(dòng)畫(huà)
earth.js
負(fù)責(zé)創(chuàng)建地球及其動(dòng)畫(huà)
text.js
負(fù)責(zé)創(chuàng)建三維文字及其動(dòng)畫(huà)
play.js
最后一個(gè)js文件,負(fù)責(zé)開(kāi)始播放整個(gè)場(chǎng)景的動(dòng)畫(huà)
額外的,背景音樂(lè)通過(guò) audio
標(biāo)簽插入到dom中,并在play中隨動(dòng)畫(huà)一起觸發(fā)播放。
正宗片頭中的背景圖是比較酷炫的,而我自己經(jīng)歷從 自己寫(xiě)shader 到 找一個(gè)類(lèi)似的gif背景 最后到 簡(jiǎn)單用css寫(xiě)一個(gè)背景拉倒了 的心理過(guò)程。
首先,我們?cè)趆tml中插入背景圖的div,并賦予id。
<div id="bg"></div>
其css如下,保證和three場(chǎng)景大小一致,并且疊在three場(chǎng)景下方。
#bg { width: 100%; height: 100%; position: absolute; overflow: hidden; perspective: 10vmin; background: radial-gradient( circle farthest-corner at center center, #b5bdca, #666 ); } .star { z-index: 1; --unit: 1.5vmin; width: var(--unit); height: var(--unit); --rotate: rotateY(90deg); transform: translateZ(-100vmin) var(--rotate) rotateX(var(--rx)) translateZ(var(--x)) scaleX(1); position: absolute; top: 0; left: 0; animation: none 1800ms infinite ease-in; background: #d1e8f7; } @keyframes hyper { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateZ(0vmin) var(--rotate) rotateX(var(--rx)) translateZ(var(--x)) scaleX(2); } }
我們使用css3的動(dòng)畫(huà)和變形,創(chuàng)造出宇宙射線(xiàn)向外設(shè)的效果, bg.js
中代碼如下 :
const starCount = 10; const bgDom = document.getElementById("bg"); for (let i = 0; i < starCount; i++) { const div = document.createElement("div"); div.classList.add("star"); bgDom.append(div); let x = `${Math.random() * 200}vmax`; let y = `${Math.random() * 100}vh`; let z = `${Math.random() * 200 - 100}vmin`; let rx = `${Math.random() * 360}deg`; div.style.setProperty("--x", x); div.style.setProperty("--y", y); div.style.setProperty("--z", z); div.style.setProperty("--rx", rx); let delay = `${Math.random() * 2000}ms`; div.style.animationDelay = delay; div.style.animationName = "hyper"; }
說(shuō)到這個(gè)屬實(shí)氣,各個(gè)瀏覽器兼容不一致,new Audio()
出來(lái)的也會(huì)有不一致,一開(kāi)始繞了很大的彎子。
最后使用很傳統(tǒng)的方法,在html中插入 audio
標(biāo)簽,并將三種格式的音樂(lè)都引進(jìn)來(lái),根據(jù)瀏覽器的不同自動(dòng)判斷加載哪個(gè)。
需要注意的是,要加上preload屬性,表示預(yù)加載。
<audio preload="auto" id="bgm"> <source src="/assets/bgm.ogg" /> <source src="/assets/bgm.mp3" /> <source src="/assets/bgm.wav" /> </audio>
創(chuàng)建完成后,在 play.js
中可通過(guò)id獲取到該音樂(lè)并播放。
以上就是“如何利用Three.js制作一個(gè)新聞聯(lián)播開(kāi)頭動(dòng)畫(huà)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。