【帶着canvas去流浪（13）】用Three.js製做簡易的MARVEL片頭動畫（下）

目錄

• 一. 模型的製做
  • 1.1 生成字體模型
  • 1.2 多表面貼圖
• 二. 鏡頭及動畫
• 三. 大做業總結

示例代碼託管在：http://www.github.com/dashnowords/blogs

博客園地址：《大史住在大前端》原創博文目錄

華爲雲社區地址：【你要的前端打怪升級指南】

有了上一篇基礎知識的儲備，本節就來製做一下簡易版的MARVEL的片頭動畫。【點擊觀看動畫效果】

一. 模型的製做

1.1 生成字體模型

字體模型的生成使用到了THREE.TextGeometry，它須要先加載字體文件，而後在回調函數中生成字體模型，至關於在THREE.ShapeGeometry實例上繪製平面圖形，而後再拉伸成爲THREE.ExtrudeGeometry拉伸體。基本代碼以下：

var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
    var geometry = new THREE.TextGeometry( 'MARVEL',{
        font: font,
        size: 80,//平面形狀大小
        height: 5,//拉伸高度
        curveSegments: 12,//默認使用的三角面片數，越多則表面越平滑
        bevelEnabled: true,//是否使用倒角
        bevelThickness: 10,
        bevelSize: 8,
        bevelOffset: 0,
        bevelSegments: 5
    } );
} );

本例中爲了在不一樣的字母表面使用不一樣的videoTexture來進行貼圖，因此將6個字母分紅3組進行生成，因此在生成過程當中須要動態調整幾何體的空間位置，避免最後生成的模型都擠在一塊兒。調整的方法以下：

//geometry指字體模型實例
geometry.computeBoundingBox();

//計算過一次之後，包圍盒屬性就會添加到geometry.boundingBox上，而後就能夠以此爲依據進行調整
cube.position.x = - (font.boundingBox.max.x - font.boundingBox.min.x)/2 + tempPos; 
cube.position.y = - (font.boundingBox.max.y - font.boundingBox.min.y)/2; 
cube.position.z = - (font.boundingBox.max.z - font.boundingBox.min.z)/2;

調整的思路就是，經過將x,y,z三個方向都偏移包圍盒自身尺寸的一半，從而達到將定位參考點移動到立方體的幾何中心的目的,tempPos記錄上一個幾何體總寬度，做爲下一個幾何體橫向（x方向）的偏移參考，這樣就能夠保證幾何體橫向錯開。設置好參數後，就能夠生成MARVEL生成的字體模型線框圖(下圖在材料中開啓了wireframe線框模式)：

1.2 多表面貼圖

從上面的線框圖能夠看到，字體模型雖然很容易生成，可是使用了超過100個三角面，再用上一節中的手動貼圖修復的方法顯然是行不通的，因此此處須要想辦法經過程序來自動貼圖。

首先，每個面都有一個normal屬性，它是一個歸一化的向量，代表了這個面在空間中的指向，也就是面的法向量。好比上面例子中，字母的正面表面的法向量就是從屏幕內垂直指向屏幕外，也就是+z方向，因此這個面的法向量實例vector3中的z份量必定是正值。從動畫進行的角度看，咱們須要使用到的表面是模型的正面，左面和下面。左面實際上就是法向量中x份量爲負數的面，下面就是y座標爲負數的面，經過法向量的特徵，咱們就能夠挑選出從特定角度觀察幾何體時看到的效果，例如遍歷幾何體的表面，把全部法向量中z爲正數的面挑出來，實際上就至關於在z軸正方向往負方向看時看到的圖形，也就是平面的MARVEL這幾個字母。

在不規則表面貼圖，就像把電影投影到一個不規則表面進行放映，好比將投影儀的幕布摺疊成某個形狀，畫面依舊會以二維投影的形式展示在幕布上。舉個栗子，好比如今要給M和A這兩個字母的下表面貼圖（都是凹進去的），須要選出的面的法向量特徵知足y < 0，而後求出包圍盒大小後，對應關係以下：

因此貼圖時，須要將素材的y方向（0-1之間的某個數字）座標按比例映射到包圍盒z方向，將素材x方向座標按比例映射到包圍盒x方向，如上圖所示。有了映射關係，就可讓程序遍歷表面並自動進行貼圖處理，上圖的貼圖效果最終會是相似下面的樣子：

A的字體模型內部有一個封閉空間，其中也有法向量z值小於0的面，它們也會按照一樣的座標轉換標準被貼圖。示例demo中的自動貼圖相關代碼以下：

//從新計算uv貼圖部分
function rebuildUV(geo) {
    if(!geo.isGeometry) return;

    const max = geo.boundingBox.max;
    const min = geo.boundingBox.min;
    const offset = new THREE.Vector3(0 - min.x,0 - min.y, 0 - min.z);
    const range = new THREE.Vector3(max.x  -  min.x,max.y - min.y, max.z - min.z);
    const faces = geo.faces;

    geo.faceVertexUvs [0] = []; 

    for(let i = 0; i< faces.length; i++){
        const v1 = geo.vertices [faces [i] .a],
        v2 = geo.vertices [faces [i] .b],
        v3 = geo.vertices [faces [i] .c]; 

        //faces[i].normal中爲歸一化的向量，能夠代表面的指向
        if(faces[i].normal.z > 0){
            //z > 0 的面面向屏幕正面，與使用者相對。
            geo.faceVertexUvs[0].push([
                new THREE.Vector2((v1.x+offset.x)/range.x,(v1.y+offset.y)/range.y),
                new THREE.Vector2((v2.x+offset.x)/range.x,(v2.y+offset.y)/range.y),
                new THREE.Vector2((v3.x+offset.x)/range.x,(v3.y+offset.y)/range.y)
            ]);
        }else if (faces[i].normal.y < 0){
            // y < 0 的面爲模型下面
            geo.faceVertexUvs[0].push([
                new THREE.Vector2((v1.x+offset.x)/range.x,(v1.z+offset.z)/range.z),
                new THREE.Vector2((v2.x+offset.x)/range.x,(v2.z+offset.z)/range.z),
                new THREE.Vector2((v3.x+offset.x)/range.x,(v3.z+offset.z)/range.z),
            ]) 
        } else{
            //沒有用到的表面默認爲不貼圖
            geo.faceVertexUvs[0].push([
                new THREE.Vector2(0,0),
                new THREE.Vector2(0,0),
                new THREE.Vector2(0,0)
            ]);
        }
    }
    geo.uvsNeedUpdate = true;
}

二. 鏡頭及動畫

變角度觀察立體模型時，透視相機的效果會更逼真一些，本例中使用正交相機進行開發。關於這兩種相機的使用，直觀的區別是：

使用透視相機就比如使用者在調節一個真實攝像機的參數來改變出如今鏡頭中的畫面的效果，能夠說是一種間接肯定拍攝範圍，且它的視場是一個錐形區域；而正交相機至關因而直接設定拍攝範圍的長寬高，至於鏡頭該在哪不須要關心，它的視場是一個矩形盒子，更像是一種平面投影，也不會有透視形成的變形效果。

正交相機的構造函數以下：

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
left — Camera frustum left plane.
right — Camera frustum right plane.
top — Camera frustum top plane.
bottom — Camera frustum bottom plane.
near — Camera frustum near plane.
far — Camera frustum far plane.

經過傳入左右上下遠近6個參數來肯定一個矩形盒子做爲舞臺區域，在舞臺內的就能夠顯示，不在舞臺內的就不顯示，好比下面示例中若是繞y軸轉動字體模型，就會有一部分超出所設定的舞臺區域：

[](https://img2018.cnblogs.com/blog/1354575/201907/1354575-20190723204434735-254014144.png

)

因爲正交相機的舞臺是一個矩形盒子，因此不管遠近，投影在先後表面的圖形都是同樣的（透視相機則不一樣，和真實效果更相似，離得越遠，看到的物體越小），因此調節正交相機position.z一般是達不到預期效果的，只能更新相機參數的上下左右座標值改變投影面的大小，也就是正交相機舞臺的正投影面區域，來模擬z方向位置的變化形成的視覺效果變化。正交相機的參數修改後須要顯示調用一下camera.updateProjectionMatrix( )來讓其生效。

本例中鏡頭變化相關代碼以下(遠近效果經過調節相機實現，角度翻轉經過操做字體模型組實現)：

//模擬相機移動軌跡
function mockCameraTrack() {
    //1.初始軌跡調整相機參數，將鏡頭拉遠
    if (camera.right < windowWidth) {   

        //鏡頭位置
        camera.left -= step;
        camera.right += step;
        camera.top += step;
        camera.bottom -= step;
    }

    //2.到達預設時間時開始反轉
    if (group.rotation.x < 0){
          if(windowWidth - camera.right < 200){
              step = 3;
              rotationStep = 0.6;
          }
        group.position.x += 0.2 * step;
        group.rotation.x += rotationStep * Math.PI / 180;
        group.rotation.z -= (rotationStep * 5 / 9) * Math.PI / 180;
    }

    //更新相機投影座標
    camera.updateProjectionMatrix();
}

三. 大做業總結

經過大做業的練習，熟悉了不少three.js的特性，但願感興趣的讀者也能夠自行練習，好比把整個片頭動畫都作出來什麼的。