第利用Three.js制作一個新聞聯(lián)播開頭動畫目錄這里才是引言技術選型場景分解代碼邏輯分解創(chuàng)建背景圖和背景音樂背景圖背景音樂在線體驗地址：點我預覽

代碼地址：點我github

這里才是引言

五一居家隔離，閑著也是閑著，想著整個活兒，于是就有了這個項目。

項目本身不是很難，但是中間確實是遇到了一些小問題，斷斷續(xù)續(xù)也是花費了三四天時間才寫完，還有一些需要優(yōu)化的地方，后續(xù)有時間再整。

我會從腳手架開始，按照場景中出現(xiàn)的物體順序逐條進行講解制作，每個物體將分為獨立的一篇文章，方便理解。Go。

技術選型

選用vite作為構建工具；選用three.js作為三維庫；選用tween.js作為動畫庫（three.js包里自帶一個，不需要額外安裝）其他就沒了，就這么簡單。

場景分解

已經(jīng)忘記新聞聯(lián)播片頭的小伙伴可以搜一下視頻去回顧下。

我將片頭場景中出現(xiàn)的物體分為這幾個：

背景音樂背景圖：宇宙背景，有往外飛的射線和氤氳的氣地球：從右下角飛到畫面正中間，不斷旋轉，地球上方的云比地球轉得略慢紅綠藍三條色帶：從畫面的三個角依次往對角線飛過出現(xiàn)的三維文字：其實分為四段，依次有動畫，到文字章節(jié)的時候細說

代碼邏輯分解

有了場景分解后，我們只要去寫對應的代碼就可以了。通過three.js代碼生成相應物體，并且使用tween.js給物體配上對應的補間動畫，達到整個場景的運動效果。

值得注意的是，該項目中所有動畫都是連貫播放的，所以需要將應用到的素材都提前加載好，不然會出現(xiàn)物體一開始是黑色的，運動了一會兒才有貼圖這種情況。

我們按照以上邏輯，預先建好各個js文件：

bg.js負責創(chuàng)建背景preload.js負責預加載資源initThree.js負責初始化三維場景rgb.js負責創(chuàng)建紅綠藍色條色帶及其動畫earth.js負責創(chuàng)建地球及其動畫text.js負責創(chuàng)建三維文字及其動畫play.js最后一個js文件，負責開始播放整個場景的動畫

額外的，背景音樂通過audio標簽插入到dom中，并在play中隨動畫一起觸發(fā)播放。

創(chuàng)建背景圖和背景音樂

本來作為用three.js做一個新聞聯(lián)播開頭動畫專題的序章，本文就應該到此了，下一章按順序應該介紹背景圖和背景音樂的創(chuàng)建。

但是想想背景圖和背景音樂不屬于three.js的范疇，篇幅也比較短，直接在此帶過，下一章直接介紹地球的創(chuàng)建好了。

背景圖

正宗片頭中的背景圖是比較酷炫的，而我自己經(jīng)歷從自己寫shader到找一個類似的gif背景最后到簡單用css寫一個背景拉倒了的心理過程。

首先，我們在html中插入背景圖的div，并賦予id。

divid="bg"/div

其css如下，保證和three場景大小一致，并且疊在three場景下方。

#bg{

width:100%;

height:100%;

position:absolute;

overflow:hidden;

perspective:10vmin;

background:radial-gradient(

circlefarthest-corneratcentercenter,

#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:none1800msinfiniteease-in;

background:#d1e8f7;

@keyframeshyper{

0%{

opacity:1;

90%{

opacity:1;

100%{

opacity:0;

transform:translateZ(0vmin)var(--rotate)rotateX(var(--rx))

translateZ(var(--x))scaleX(2);

}

我們使用css3的動畫和變形，創(chuàng)造出宇宙射線向外設的效果，bg.js中代碼如下：

conststarCount=10;

constbgDom=document.getElementById("bg");

for(leti=0;istarCount;i++){

constdiv=document.createElement("div");

div.classList.add("star");

bgDom.append(div);

letx=`${Math.random()*200}vmax`;

lety=`${Math.random()*100}vh`;

letz=`${Math.random()*200-100}vmin`;

letrx=`${Math.random()*360}deg`;

div.style.setProperty("--x",x);

div.style.setProperty("--y",y);

div.style.setProperty("--z",z);

div.style.setProperty("--rx",rx);

letdelay=`${Math.random()*2000}ms`;

div.style.animationDelay=delay;

div.style.animationName="hyper";

}

背景音樂

說到這個屬實氣，各個瀏覽器兼容不一致，newAudio()出來的也會有不一致，一開始繞了很大的彎子。

最后使用很傳統(tǒng)的方法，在html中插入audio標簽，并將三種格式的音樂都引進來，根據(jù)瀏覽器的不同自動判斷加載哪個。

需要注意的是，要加上preload屬性，表示預加載。

audiopreload="auto"id="bgm"

sour