利用Three.js制作一个新闻联播开头动画
在线体验地址：点我预览
代码地址：点我github
这里才是引言
五一居家隔离，闲着也是闲着，想着整个活儿，于是就有了这个项目。
项目本身不是很难，但是中间确实是遇到了一些小问题，断断续续也是花费了三四天时间才写完，还有一些需要优化的地方，后续有时间再整。
我会从脚手架开始，按照场景中出现的物体顺序逐条进行讲解制作，每个物体将分为独立的一篇文章，方便理解。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。
<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制作一个新闻联播开头动画的文章就介绍到这了,更多相关Three.js 新闻联播开头动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在一些传统的小型WEB应用开发过程中，JavaScript通常只是拿来做表单验证而以，所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况，又或者事件冒泡对最终实现效果影响不大，可忽略。2010-01-01
BootStrap中关于Select下拉框选择触发事件及扩展
Select下拉框的问题，想在选择一个选项后，前台显示做出变动，并且知道选择的是第几个选项。 怎么解决这个问题呢？下面小编给大家带来了BootStrap中关于Select下拉框选择触发事件及扩展，需要的朋友参考下吧2016-11-11
FF没有offsetX属性，有个layerX属性，只要将事件源的位置设置成相对定位(position:relative)或绝对定位(position:absolute)，两者结果就相等，表示事件源相对于父元素的X坐标。2010-03-03
JS中‘hello’与new String(‘hello’)引出的问题详解
这篇文章主要给大家介绍了关于JS中'hello'与new String('hello')引出的问题的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧2018-08-08
这篇文章主要介绍了Ajax跨域实现代码(后台jsp),需要的朋友可以参考下2017-01-01
下面小编就为大家带来一篇关于验证码在IE中不刷新的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要为大家详细介绍了jQuery中deferred对象使用方法，也就是延迟对象的使用方法，感兴趣的小伙伴们可以参考一下2016-07-07
本文为《JavaScript高级程序设计》第9章中的跨平台事件中的部分内容。2010-04-04
这篇文章主要介绍了基于javascript实现全国省市二级联动下拉选择菜单，以一个完整实例形式较为详细的分析了js实现省市二级联动下拉菜单的实现技巧，非常简单实用,需要的朋友可以参考下2016-01-01
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Array没有indexOf方法，这样在一个数组中查找某个元素的索引时比较麻烦，于是通过prototype原型扩展了Array.prototype.indexOf(),在对数组进行遍历的时候却出现了问题2013-04-04
最新评论