如何利用Three.js制作一個新聞聯播開頭動畫

今天小編給大家分享一下如何利用Three.js制作一個新聞聯播開頭動畫的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

技術選型

• 選用vite作為構建工具；

• 選用three.js作為三維庫；

• 選用tween.js作為動畫庫（three.js包里自帶一個，不需要額外安裝）

• 其他就沒了，就這么簡單。

場景分解

已經忘記新聞聯播片頭的小伙伴可以搜一下視頻去回顧下。

我將片頭場景中出現的物體分為這幾個：

• 背景音樂

• 背景圖：宇宙背景，有往外飛的射線和氤氳的氣

• 地球：從右下角飛到畫面正中間，不斷旋轉，地球上方的云比地球轉得略慢

• 紅綠藍三條色帶：從畫面的三個角依次往對角線飛過

• 出現的三維文字：其實分為四段，依次有動畫，到文字章節的時候細說

代碼邏輯分解

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

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

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

• bg.js 負責創建背景

• preload.js 負責預加載資源

• initThree.js 負責初始化三維場景

• rgb.js 負責創建紅綠藍色條色帶及其動畫

• earth.js 負責創建地球及其動畫

• text.js 負責創建三維文字及其動畫

• play.js 最后一個js文件，負責開始播放整個場景的動畫

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

創建背景圖和背景音樂

背景圖

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

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

<div id="bg"></div>

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

#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的動畫和變形，創造出宇宙射線向外設的效果， 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";
}

背景音樂

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

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

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

    <audio preload="auto" id="bgm">
      <source src="/assets/bgm.ogg" />
      <source src="/assets/bgm.mp3" />
      <source src="/assets/bgm.wav" />
    </audio>

創建完成后，在 play.js 中可通過id獲取到該音樂并播放。

以上就是“如何利用Three.js制作一個新聞聯播開頭動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。