用three.js做一个新闻联播开头动画(一)
一个好习惯,先给结论
最终效果如下:
在线体验地址:点我预览
代码地址:点我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写一个背景拉倒了
的心理过程。
用three.js做一个新闻联播开头动画(一)相关推荐
- 用js做一个鼠标惯性动画
用js做一个简单的鼠标惯性动画 <style type="text/css">#div1{width: 50px;height: 50px;background: re ...
- 用 JS 做一个数独游戏(二)
用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...
- video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置 首先运行livego ...
- 用js做一个数字华容道
我很喜欢华容道啊,这次用js做一个 话不多说上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
- 用js做一个简单的秒表计时器
用js做一个简单的秒表计时器 具体代码如下 <!DOCTYPE html> <html lang="en"><head><meta cha ...
- 用JS做一个简易的时间显示动态效果
用JS做一个简易的时间显示动态效果 运行效果 代码 <!DOCTYPE html> <html lang="en"><head><meta ...
- js 月份间隔计算器_15分钟用JS做一个简易计算器
原标题:15分钟用JS做一个简易计算器 前言 这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...
- CSS/SCSS 做一个心跳的动画:keyframe
CSS/SCSS 做一个心跳的动画 一.心电图数据化 做动画,需要动画曲线,心跳的曲线自然是心电图,网上随便找一个差不多的,选取完整的一部分 1. 横向10等分 找到基线,横向10等分. 整个图是一个 ...
- 使用three.js做一个网页的相册动画
想了很久不知道有没有必要,但还是记录下来,以后说不定还会用的到,希望大家也有机会试试 就先做一个简单的页面,做一下动画,放一些图片吧,以后有新东西还是会加进来的 1.先创建一个html文件,初始化代码 ...
最新文章
- 为了熟悉再一次的配置Postfix
- Tomcat解决HTTP GET中文乱码
- rac san+oracle_Oracle11g1+RAC+install+for+CentOS5(ASM+to+FC+SAN)_IT168文库
- Vss服务端用户存在,但客户端登陆不进去
- linux中shell自动对齐代码,linux – Shell编程 – 如何printf像表一样对齐我的输出?...
- 服务端架构设计及功能说明-续1
- centos6 安装xhprof扩展
- 我的docker随笔24:docker产生coredump文件
- 直流电机伺服控制系统及仿真
- JavaScript包管理器综述
- oracle查询sql保留小数点前0,去掉小数位后末尾的0
- 基于数字孪生的IBV智能建筑可视化系统了解一下
- 所有的风只向她们吹 所有的日子都为她们破碎——査海生《四姐妹》
- Taro+Vue3 - 配置@路径别名
- (软件工程)-- 总体设计报告
- 编译原理实验2(1)——自上而下语法分析
- 探秘互联网金融产品开发的技术路线图
- Day11(重写,多态,final,抽象类)
- 斐波拉契数列的三种实现方法
- 数据分析——用户粘性指标 DAU/MAU