【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上) #华为云·寻找黑马程序员#
【摘要】 用three.js实现简易的漫威片头动画
示例代码托管在:http://www.github.com/dashnowords/blogs
一. 大作业说明
通读完上一篇博文中提及的教程,觉得应该搞个大作业巩固一下所学的知识,想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》,于是决定仿一个MARVEL
的片头动画作为three.js
的课后练习,使用的版本是R104
版本。本节先来解决视频贴图的问题。
二.基本思路
简易片头动画的实现思路如下,除了正常的舞台元素外,需要背景音乐,使用THREE.AudioLoader
就可以从后后台加载音乐,舞台中主要的实体元素是MARVEL
这几个字母的立体模型,可以使用THREE.TextGeometry
来进行建模(【Three.js绘制字体模型】),它要求先载入字体文件,然后才能实例化,参考官方文档的实现就可以了。有了字体模型以后,还需要一些影片素材贴在字体模型上,THREE.VideoTexture
可以解决这个问题(【Three.js使用VideoTexture实现视频Video更新纹理】),它可以将HTML中的<video>
标签引入的资源作为表面纹理通过材料实例的map
参数与之关联在一起,然后贴在几何体表面,最后要解决的问题就是镜头的变化了,看过漫威电影的同学都知道,片头动画最后一部分的画面先是镜头后退,然后MARVEL
几个字母逐渐翻转过来,这个效果的实现方式很多,可以调整相机参数,也可以调整物体参数,建议自己动手时各种方法都尝试一下。为了熟悉更多特性,笔者自己在实现中使用正交相机,通过调整正交相机的视场宽度来模拟镜头后退动画(在透视相机下可以直接调整相机的Z轴坐标实现类似的效果),然后通过设置几何体的位移和旋转来模拟镜头的移动。
三.视频纹理表面修复——UV映射
3.1 问题描述
整个大作业中最难处理的就是视频纹理贴图的部分,所以本篇先来搞定这个知识点。如果使用THREE.js
提供的Geometry
基本不会遇到什么问题,例如上图中的示例,就将视频素材贴在了立方体的各个面上,然而当你使用其他带有一些自定义性质的几何体实例,比如自己画了一个shape
然后拉伸成为拉伸体
,或者本次大作业中需要使用的TextGeometry
字体模型时。视频贴图就直接失效了。同样尺寸的立方体,如果用THREE.BoxGeometry
来生成实例,表面就可以直接贴视频,如果使用shape
画一个矩形再拉伸成同样尺寸的实体,视频就无法正常覆盖在模型表面,如下图所示:
仔细看你会发现图片边界的地方有发光的条,将细节放大后可以看到下面的场景:
可以看到,视频实际上的确是覆盖在立方体表面了,但只是占了很小的一块,所以需要针对这种情况进行模型纹理修复,使视频可以覆盖几何体的单个表面。
3.2 纹理贴图的基本原理-UV映射
在Three.js
中,几何体是通过点
和面
的特征构建起来的,如果将一个几何体实例对象在控制台打印出来,就可以看到存储端点坐标信息的vertexs
和存储面信息的faces
数组。当你构建一个立方体时,会发现它的faces
属性数组中有12个面的信息,因为Three.js
中默认使用三角面片来构建几何体,一个矩形表面需要用两个三角面片来构建,(你可以将立方体材料material
中传入 wireframe:true
来看到立方体的线框图),faces
数组中每一个面中存储的是构建这个三角面的3个点的位置信息。
纹理贴图坐标也称为UV
坐标,它的贴图原理是这样的,首先将贴图素材x轴和y轴的长度以0-1来标记,那么使用3个坐标范围在[0~1,0~1]的点就可以在图形素材中以三角形剪裁出需要的部分,同理使用4个坐标范围在[0~1,0~1]的点,就可以在图形素材中以四边形剪裁出需要的部分,以此类推,如下图所示:
右图中白色三角形的三个顶点在归一化坐标系中的坐标值已经列出,将[0.2,0.2],[0.2,0.8],[0.7,0.2]
这三个坐标点信息填充到对应的UV
映射数组中后,Three.js
就会用这个三角形区域来对一个三角面进行贴图。由于默认面是三角面,所以我们通过实例化3个THREE.Vector2(x,y)
对象来表示从素材中截取的三角形区域,得到了素材后要如何将它与三角面的顶点坐标对应起来呢?这就引出了本节中的关键概念——UV映射矩阵。
大部分高大上的概念都离不开一个土掉渣的实现,UV映射矩阵
也不例外。
由于贴图素材是三个点,几何体某个三角面也是有三个顶点,如果不限制索引,那么就可能存在很多种贴图结果:
为了保证贴图素材的方向,它们之间就有存在一个对应关系,否则最后渲染的纹理可能就是倒着的或者旋转90°的图像,所以UV映射矩阵
中存储的依然是上例中右图的三个点,但默认索引和构成几何体指定面的三个顶点的索引相对应,这就唯一限定了截取表面到几何体三角面的贴图样式。
3.3 关键示例代码
完整的示例可以从附件或开头处的github
代码仓中获取,示例是一个express
工程,npm install
装一下依赖,跑起来之后访问localhost:3333
就可以看到。
//重构UV Mapping
function rebuildUVMapping() { //在纹理素材上标记关键点let pos = [new THREE.Vector2(0,0.1),new THREE.Vector2(1,0.1),new THREE.Vector2(1,0.9),new THREE.Vector2(0,0.9),]//uv映射的纹理存放在几何体实例的下面这个属性中let uvs = geometry.faceVertexUvs[0];//背面//生成网格时材料可以传数组,materialIndex可以为不同面指定不同的材质,本例中对应不同的视频片段geometry.faces[0].materialIndex = 4; geometry.faces[1].materialIndex = 4;//重构UV映射关系矩阵uvs[0] = [pos[1], pos[0], pos[3]];uvs[1] = [pos[3], pos[2], pos[1]];//正面geometry.faces[2].materialIndex = 0;geometry.faces[3].materialIndex = 0;uvs[2] = [pos[3], pos[0], pos[1]];uvs[3] = [pos[1], pos[2], pos[3]];//标记uv映射是可更新的geometry.uvsNeedUpdate = true;
}
四.小结
视频纹理是本例中最难的部分了,下一篇中笔者将构建字体模型,并加入镜头转换,完成整个预期的动画,敬请关注,也希望感兴趣的小伙伴一起交流。
md原文.rar
demo.rar
来源:华为云社区 作者:大史不说话
【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上) #华为云·寻找黑马程序员#相关推荐
- 【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上)
我的github主页:https://github.com/dashnowords 我的新书上架啦,3天即登京东计算机编程语言类排行榜Top1!!!精选30+JavaScript库,从使用方式,设计原 ...
- 【带着canvas去流浪(13)】用Three.js制作简易的MARVEL片头动画(下)#华为云·寻找黑马程序员#
[摘要] three.js实现的Web 3D字体模型动画 示例代码托管在:http://www.github.com/dashnowords/blogs 有了上一篇基础知识的储备,本节就来制作一下简易 ...
- 爬虫新宠requests_html 带你甄别2019虚假大学 #华为云·寻找黑马程序员#
python模块学习建议 学习python模块,给大家个我自己不专业的建议: 养成习惯,遇到一个模块,先去github上看看开发者们关于它的说明,而不是直接百度看别人写了什么东西.也许后者可以让你很快 ...
- 使用jieba分析小说太古神王中,男主更爱谁?去文章中找答案吧!#华为云·寻找黑马程序员#
特大好消息 周三晚上,我媳妇儿就要带着俩小爷去重庆姐姐家玩了,我又可以一个人开心的学习.玩耍了,想着都开心到失眠啊-失眠怎么办?写公众号啊,哈哈. 文本分析 很多时候,我们会去统计一片文章中的高频词汇 ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 【带着canvas去流浪(10)】文字烟花
目录 一. 文字烟花 二. 动画原理 2.1 像素操作 2.2 烟花生成算法 2.3 计时器 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址 ...
- 【带着canvas去流浪(11)】Three.js入门学习笔记
[摘要] three.js 入门学习笔记 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 资料推荐及建议 1.官方文档 很详细,但是API部分单独 ...
- 【带着canvas去流浪(5)】绘制K线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...
- 【带着canvas去流浪(9)】粒子动画
我的github主页:https://github.com/dashnowords 我的新书上架啦,3天即登京东计算机编程语言类排行榜Top1!!!精选30+JavaScript库,从使用方式,设计原 ...
最新文章
- 百度员工吐槽:百度江河日下,不知该何去何从?
- 面试必问的分布式相关内容(未完待续)
- 读去excel文件内容写入数据库
- (转)全文检索技术学习(一)——Lucene的介绍
- 同步异步网络搜集到的比喻
- NYOJ 119 士兵杀敌(三)
- linux怎么用两个进程传值,关于linux:将变量脚本参数传递给另一个脚本,然后将qsub传递给程序...
- linux部署DM数据库的DEM系统
- 计算机网络实验(华为eNSP模拟器)——第二章 VRP通用路由平台介绍
- 计算机文化基础课程总结,计算机文化基础课程总结.docx
- 【学习笔记】【C语言】结构体
- SqlServer之代码块相关
- vue路由匹配实现包容性_多元化和包容性:停止说话,做作业
- C#之不得不上的网站。
- 描绘质量属性的六个常见属性场景。
- 一天已不足24小时?一年不足365天?求每年元旦为周几的公式还能用吗?(标题党石锤了)
- autojs发射广播源码,使用了sendBroadcast方法
- android获取imei兼容_Android如何获取双卡手机IMEI的方法示例
- android:RecyclerView交互动画(上下拖动,左右滑动删除)
- 高等数学(预备知识之对数函数)