利用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 新闻联播开头动画内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7093864990972575758
相关文章
- ps动态环绕动画效果是现在很多人都非常喜欢的,大多数人还不知道ps动态环绕动画效果怎么制作下面文章就给大家介绍下ps怎么制作科技感十足的动态环绕动画效果,一起来看看...2017-07-06
- 这篇文章主要介绍了jQuery动画效果相关方法,结合实例形式较为详细的分析了jQuery实现动画效果所用到的常见方法与相关注意事项,需要的朋友可以参考下...2016-01-05
- Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果,Vue 提供了内置的过渡封装组件transition,该组件用于包裹要实现过渡效果的组件...2021-10-10
- 微信小程序目前的火热程度相信不用多言,最近利用空余时间用小程序实现了个动态的登录页效果,所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-05-09
- 本文章来为各位介绍一篇利用PS制作“签名”GIF小动画的例子,希望这个制作过程能够帮助到各位朋友,各位进入看看吧。 先给大家看下效果,有兴趣的童鞋→_→可以...2016-09-14
- 这篇文章主要介绍了公众号SVG动画交互实战代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
- 这篇文章主要为大家详细介绍了js实现缓动动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-25
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
这篇文章主要介绍了jQuery实现的给图片点赞+1动画效果,并附带在线演示及demo源码下载,涉及jQuery鼠标事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下...2016-01-05jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
这篇文章主要介绍了jQuery实现的点赞随机数字显示动画效果,并附带在线演示与demo源码供读者下载.涉及jQuery鼠标事件响应及基于animate动画效果实现技巧,需要的朋友可以参考下...2016-01-05- 这篇文章主要介绍了JS实现点击登录弹出窗口同时背景色渐变动画效果,涉及JavaScript基于鼠标事件及时间函数定时触发形成渐变动画的相关技巧,需要的朋友可以参考下...2016-03-28
Photoshop利用智能对象将人物制作成花海里飘散消失的GIF动画教程
今天小编在这里就来给Photoshop的这一款软件的使用者们来说一说利用智能对象将人物制作成花海里飘散消失的GIF动画的教程,各位想知道具体方法的使用者们,那么大家就快来...2016-09-14- 这篇文章主要给大家介绍了关于three.js显示中文字体与tween应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-04
- 这篇文章主要介绍了three.js 实现露珠滴落动画效果的示例代码,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-01
- 这篇文章主要介绍了SwiftUI 中创建反弹动画的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有功能,其中一项主要的特性是Angular对动画的支持。下面通过本文给大家介绍AngularJS中实现显示或隐藏动画效果的方式总结,对angularjs动画效果相关知识感兴趣的朋友一起学习...2016-01-05
- 这篇文章主要为大家详细介绍了Android Studio实现帧动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-11-14
- 这篇文章主要介绍了three.js 制作动态二维码的示例代码,文中讲解非常细致,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-08-01
- Android动画背景图自动播放的实现程序,我们在开发android应用的时候,经常会遇到类似从网络加载大图,在加载的过程中,在图片要显示的ImageView位置,先显示一个转圈的loadin...2016-09-20
- 这篇文章主要介绍了Swift使用transform 实现重复平移动画效果,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-21
- 本文将为大家收集10个超赞的jQuery图片滑块动画,都是小编精挑细选而来,希望这些现成的jQuery插件将为你节省很多开发时间。...2016-01-26