如何用Three.js打造新闻联播风格的动画开场？

本文共计1579个文字，预计阅读时间需要7分钟。

目录+这里是引言+技术选型+场景分析+代码逻辑分解+创建背景图和背景音乐+背景图+背景音乐+在线体验地址：点击我预览+代码地址：点击我github+这里才是引言+五一居家隔离，闲着也是闲着“

目录

• 这里才是引言
• 技术选型
• 场景分解
• 代码逻辑分解
• 创建背景图和背景音乐
• 背景图
• 背景音乐

在线体验地址：点我预览

代码地址：点我github

这里才是引言

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

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

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

技术选型

• 选用vite作为构建工具；
• 选用three.js作为三维库；
• 选用tween.js作为动画库（three.js包里自带一个，不需要额外安装）
• 其他就没了，就这么简单。

场景分解

已经忘记新闻联播片头的小伙伴可以搜一下视频去回顾下。