示例代码托管在: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个坐标范围在[01,01]的点就可以在图形素材中以三角形剪裁出需要的部分,同理使用4个坐标范围在[01,01]的点,就可以在图形素材中以四边形剪裁出需要的部分,以此类推,如下图所示:

右图中白色三角形的三个顶点在归一化坐标系中的坐标值已经列出,将[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;
}

四.小结

视频纹理是本例中最难的部分了,下一篇中笔者将构建字体模型,并加入镜头转换,完成整个预期的动画,敬请关注,也希望感兴趣的小伙伴一起交流。

【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上)的更多相关文章

  1. 【带着canvas去流浪(13)】用Three.js制作简易的MARVEL片头动画(下)

    目录 一. 模型的制作 1.1 生成字体模型 1.2 多表面贴图 二. 镜头及动画 三. 大作业总结 示例代码托管在:http://www.github.com/dashnowords/blogs 博 ...

  2. 【带着canvas去流浪】(2)绘制折线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...

  3. 带着canvas去流浪系列之二 绘制折线图

    [摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  4. 【带着canvas去流浪(7)】绘制水球图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 文字淹水效果的实现 五. 关于canvas抗锯齿 六. 小结 示例代码托管在:http://www.github.com/dashnowor ...

  5. 【带着canvas去流浪(5)】绘制K线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  6. 【带着canvas去流浪(11)】Three.js入门学习笔记

    目录 一. 资料推荐及建议 二. Three.js中的基本概念 三.重点笔记 四.补充示例 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址: ...

  7. 带着canvas去流浪系列之九 粒子动画【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  8. 带着canvas去流浪系列之五 绘制K线图

    [摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  9. 带着canvas去流浪系列之七 绘制水球图

    [摘要] 用原生canvasAPI实现百度echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

随机推荐

  1. 在Delphi中创建线程,请一定使用BeginThread()代替CreateThread()创建线程!(更好的管理异常)

    在Delphi中创建线程,请一定使用BeginThread()代替CreateThread()创建线程! 如果直接使用Win32的API函数CreateThread()创建多个线程,也是可以创建的.但 ...

  2. 使用.NET进行高效率互联网敏捷开发的思考和探索【一、概述】

    不知从什么时候开始,创业变得很廉价,谈什么都是互联网,动辄融资千万.这阵风好像也刮向了程序员中,有那么一大批开发者,数据结构不好好学习.数据库原理不扎实掌握,在github上发布几个项目,用nodej ...

  3. 一顶博士帽能带来什么——访GOOGLE公司中国区总裁李开复

      在读了博士生远潇给本报的来信后,GOOGLE公司中国区总裁李开复说,有这些困惑和担心,实际上是很多博士生们在读博士之前并没有认真地想过,自己是不是能耐得住寂寞做学问,是不是能抵御来自物质世界的诱惑 ...

  4. RPG Maker MV游戏解包

    该文章最新版本请前往:https://www.crowsong.xyz/127.html 前言 使用Petschko's RPG-Maker-MV File-Decrypter进行解包 使用Petsc ...

  5. Qt加载百度离线地图

    1.下载百度地图离线API 1.3 下载链接:http://download.csdn.NET/detail/caoshangpa/9476608,网上虽然出现了2.0版本离线API,但是经试用,存在 ...

  6. 2019年5月23日 AY 程序员调侃语录

    我是AY,杨洋,做wpf开发的,最近得了一种病,程序员患得患失综合征.同事说,我年纪在变大,技术跟不上.业余之间,我原创了写了一些语录,给大家中午休息,累疲惫的时候,开心放松下. 1.有很多公司找我谈 ...

  7. Django多对多表的三种创建方式,MTV与MVC概念

    MTV与MVC MTV模型(django): M:模型层(models.py) T:templates V:views MVC模型: M:模型层(models.py) V:视图层(views.py) ...

  8. centos系统supervisor配置

    supervisor用来管理非daemon程序!将自动转换为daemon程序 安装: yum install supervisor 配置: 默认配置文件路径: /etc/supervisord.con ...

  9. centos crontab用法详解 定时任务的设置

    crontab 是用来让使用者在固定时间或固定间隔执行程序之用,类似于windows的计划任务 安装: yum -y install vixie-cron yum -y install crontab ...

  10. 深度残差网络(ResNet)

    引言 对于传统的深度学习网络应用来说,网络越深,所能学到的东西越多.当然收敛速度也就越慢,训练时间越长,然而深度到了一定程度之后就会发现越往深学习率越低的情况,甚至在一些场景下,网络层数越深反而降低了 ...