示例代碼托管在： "http://www.github.com/dashnowords/blogs" 博客園地址： "《大史住在大前端》原創博文目錄" 華為雲社區地址： "【你要的前端打怪升級指南】" [TOC] 一. 大作業說明 通讀完上一篇博文中提及的教程，覺得應該搞個大作業鞏固一下所學的知識， ...
目錄
示例代碼托管在：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;
}四.小結
視頻紋理是本例中最難的部分了，下一篇中筆者將構建字體模型，並加入鏡頭轉換，完成整個預期的動畫，敬請關註，也希望感興趣的小伙伴一起交流。
