如何利用Three.js制作一个新闻联播开头动画
如何利用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制作一个新闻联播开头动画”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注高防服务器网行业资讯频道。
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[