利用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 新闻联播开头动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • three.js 实现露珠滴落动画效果的示例代码

    three.js 实现露珠滴落动画效果的示例代码

    前言 大家好,这里是 CSS 魔法使--alphardex. 本文我们将用three.js来实现一种很酷的光学效果--露珠滴落.我们知道,在露珠从一个物体表面滴落的时候,会产生一种粘着的效果.2D平面中,这种粘着效果其实用css滤镜就可以轻松实现.但是到了3D世界,就没那么简单了,这时我们就得依靠光照来实现,其中涉及到了一个关键算法--光线步进(Ray Marching).以下是最终实现的效果图 撒,哈吉马路由! 准备工作 笔者的 three.js模板 :点击右下角的fork即可复制一份 正片

  • 基于three.js实现简易照片墙效果

    基于three.js实现简易照片墙效果

    学习three.js的过程中,写的一个简易照片墙,可以使用鼠标滚轮上下浏览,采用的是移动相机的方式. 代码贴出来,供学习这一块的朋友们参考和指导:  <!DOCTYPE HTML> <HTML> <HEAD>     <META charset="utf-8">     <META name="viewport" content="width=device-width, user-scalable=no

  • Three.js+React实现3D开放世界小游戏

    Three.js+React实现3D开放世界小游戏

    目录 背景 效果 设计 实现 加载资源 页面结构 数据初始化 场景初始化 创建世界 创建星空 创建地形 加载进度管理 创建基地模型 创建阿狸模型 控制阿狸运动 动画更新 页面缩放适配 添加游戏逻辑 毛玻璃效果 总结 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民必须穿戴基地发放的防辐射服才能生存.阿狸驾驶星际飞行器降临此地,快帮它在限定时间内使用轮盘移动找到基地获取防辐射服吧! 本文使用 Three.js + React + CANNON 技术栈,实现通过滑动屏

  • 基于Three.js制作一个3D中国地图

    基于Three.js制作一个3D中国地图

    目录 1.使用geoJson绘制3d地图 1.1 创建场景相关 1.2 根据json绘制地图 2.增加光照 3.增加阴影模糊 4.增加鼠标事件 5.渲染 6.动画效果 不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈 本项目使用vue-cli创建,但不影响使用,主要绘制都已封装成类 1.使用geoJson绘制3d地图 1.1 创建场景相关 // 创建webGL渲染器 this.renderer = new THREE.WebGLRenderer( { antiali

  • Three.js+React实现3D文字悬浮效果

    Three.js+React实现3D文字悬浮效果

    目录 背景 效果 实现 资源引入 DOM结构 设置状态 网格背景 场景初始化 创建材质 创建文字模型 创建几何体模型 鼠标事件监听 背景色切换 后期渲染 动画 缩放适配 双击全屏 总结 背景 在 Three.js Journey 课程示例中,提供了一个使用 Three.js 内置方法实现的 3D 文字悬浮效果的例子,本文使用 React + Three.js 技术栈,参照示例实现类似的效果.本文中涉及到的知识点主要包括:CSS 网格背景.MeshNormalMaterial 法向材质.FontL

  • Threejs实现滴滴官网首页地球动画功能

    偶然翻滴滴官网看到首页下翻第六栏(大概)有个绚丽的地球的三维动画,试着用there.js实现了下,基本实现了动画效果,不过还是有些问题:这个动画看似简单,但也用到好的绘制方法和计算,这里先写一下主要功能的实现: 先看示例:http://39.106.166.212:8080/webgl/t4(由于是写dome的一个项目,内容较多没做优化,第一次加载会会比较慢,需多等待几秒) (lice这个截图工具也是很不好用,每次都截到一半 ╮(╯﹏╰)╭) 一. 3d绘制场景的构建 绘制一个3d程序首先需要添

  • 利用Three.js制作一个新闻联播开头动画

    利用Three.js制作一个新闻联播开头动画

    目录 这里才是引言 技术选型 场景分解 代码逻辑分解 创建背景图和背景音乐 背景图 背景音乐 在线体验地址:点我预览 代码地址:点我github 这里才是引言 五一居家隔离,闲着也是闲着,想着整个活儿,于是就有了这个项目. 项目本身不是很难,但是中间确实是遇到了一些小问题,断断续续也是花费了三四天时间才写完,还有一些需要优化的地方,后续有时间再整. 我会从脚手架开始,按照场景中出现的物体顺序逐条进行讲解制作,每个物体将分为独立的一篇文章,方便理解.Go. 技术选型 选用vite作为构建工具: 选

  • 利用Vue.js制作一个拼图华容道小游戏

    利用Vue.js制作一个拼图华容道小游戏

    目录 游戏介绍 核心思路 核心代码 html games 类 生成随机图片数量 移动图片 键盘事件 拼图完成 结语 游戏介绍 先看看界面 这是一个拼图游戏,可以自选难度和自选闯关图片 游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然后只要把乱序的小图片还原成完整的图片就闯关成功 游戏区域有一个空白位置,可以用鼠标点击空白位相邻的图片完成替换,也就是移动,也可以用键盘上下左右操作 游戏好玩,可不要贪杯哦,学习也不能落下,不管什么游戏都一样 这个虽然用到的技术很一般很简

  • 利用pixi.js制作简单的跑酷小游戏

    利用pixi.js制作简单的跑酷小游戏

    目录 前言 项目地址 demo地址 初始化项目 主要逻辑 useParkour useScene useHurdle Player 前言 此项目使用pixi.js和vue实现,部分素材来自爱给网,本项目仅作用于 pixi.js 学习用途,侵权立删. 项目地址 shellingfordly/pixi-games demo地址 pixi-games 初始化项目 使用vite初始化项目 pnpm create vite my-vue-app 安装pixi.js和pixi-tweener pixi-tw

  • 使用Three.js制作一个3D奖牌页面

    使用Three.js制作一个3D奖牌页面

    目录 背景 效果 实现 引入资源 场景初始化 光照效果 Three.js 提供的光源 添加网格和地面 创建奖牌 奖牌UI素材生成 Three.js 中的贴图 MeshPhysicalMaterial 物理材质 特殊属性 加载1000+文字模型 补间动画 动画更新 礼花动画 总结 背景 本文使用 React + Three.js 技术栈,实现粉丝突破1000的3D纪念页面,包含的主要知识点包括:Three.js 提供的光源.DirectionLight 平行光.HemisphereLight 半球

  • 基于Flutter制作一个火箭发射动画

    基于Flutter制作一个火箭发射动画

    目录 总结 前言 北京时间10月16日0时23分,神舟十三号飞船成功发射,目前三名航天员已经顺利进驻空间站,开始为期6个月的“太空差旅”生活. 国家的航天技术的突飞猛进也让岛上码农很自豪,今天看 Flutter 的动画知识,看到了 AnimatedPositioned 这个组件,可以用于控制组件的相对位置移动.结合这个神舟十三号的发射,灵机一动,正好可以使用AnimatedPositioned 这个组件实现火箭发射动画.话不多说,先上效果! 效果说明 这里其实是两张图片叠加,一张是背景地球星空的

  • 利用Python+Excel制作一个视频下载器

    利用Python+Excel制作一个视频下载器

    说起Excel,那绝对是数据处理领域王者般的存在. 而作为网红语言Python,在数据领域也是被广泛使用. 其中Python的第三方库-xlwings,一个Python和Excel的交互工具,可以轻松地通过VBA来调用Python脚本,实现复杂的数据分析. 今天,小F就给大家介绍一个Python+Excel的项目[视频下载器]. 主要使用到下面这些Python库. import os import sys import ssl import ffmpeg import xlwings as xw

  • 如何使用three.js 制作一个三维的推箱子游戏

    今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击 要制作一个推箱子游戏,正常要有以下4个步骤 定义一些数组,要有开始箱子数组.结束箱子数组.地面数组还有墙面数组,有这四个数组就可以组成一个关卡. 根据数组初始化地面墙面箱子和目标地点标志物. 使用FirstPersonControls控制器,控制相机移动,根据地面箱子和墙面算出可移动区域. 根据相机正对箱

  • 利用Node.js创建一个密码生成器的全步骤

    利用Node.js创建一个密码生成器的全步骤

    目录 一. 准备工作 二. 编写命令行 2.1 添加版本和描述 2.2 配置密码长度命令 2.2 密码长度添加默认值:8 2.3 配置保存密码命令 2.4 配置密码格式: 没有数字 2.5 配置密码格式: 没有符号 三. 解析命令行-创建密码 3.1 添加color 3.2 添加剪贴板 四. 保存密码到对应的文件 五.将本地npm模块配置成全局passgen 总结 一. 准备工作 1.1 创建项目 $ npm init 1.2 安装依赖 $ npm i commander chalk clipb

  • 基于JS制作一个简单的网页版地图

    基于JS制作一个简单的网页版地图

    目录 前言 一.申请地图的AK密钥 二.主要代码分析 三.全部代码 四.结果展示 前言 以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜索时,或者经纬度查询城市时,该小控件也能自由地切换到目标城市. 一.申请地图的AK密钥 1.首先找到一个地图开放平台,这里以百度地图开放平台为例,步骤如下:进入百度地图开放平台,拉到最底下,进行登录注册,然后进入应用管

随机推荐