一个好习惯，先给结论

最终效果如下：

在线体验地址：点我预览

代码地址：点我github

本文首发于：https://blog.gis1024.com/three_news_op_1.html

这里才是引言

五一居家隔离，闲着也是闲着，想着整个活儿，于是就有了这个项目。

项目本身不是很难，但是中间确实是遇到了一些小问题，断断续续也是花费了三四天时间才写完，还有一些需要优化的地方，后续有时间再整。

我会从脚手架开始，按照场景中出现的物体顺序逐条进行讲解制作，每个物体将分为独立的一篇文章，方便理解。Go。

技术选型

  • 选用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中随动画一起触发播放。

创建背景图和背景音乐

本来作为 用three.js做一个新闻联播开头动画 专题的序章，本文就应该到此了，下一章按顺序应该介绍背景图和背景音乐的创建。

但是想想背景图和背景音乐不属于three.js的范畴，篇幅也比较短，直接在此带过，下一章直接介绍地球的创建好了。

背景图

正宗片头中的背景图是比较酷炫的，而我自己经历从 自己写shader 到 找一个类似的gif背景 最后到 简单用css写一个背景拉倒了 的心理过程。😭

首先，我们在html中插入背景图的div，并赋予id。

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

其css如下，保证和three场景大小一致，并且叠在three场景下方。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#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 中代码如下 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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属性，表示预加载。

1
2
3
4
5
<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做一个新闻联播开头动画 的第一章，介绍了项目整体大致情况，并给出了技术选型和场景分析，给出了背景图和背景音乐的创建方式。

下一章，我们就将从地球开始，正式开始制作三维场景和动画。

本文首发于：https://blog.gis1024.com/three_news_op_1.html