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

大史不說話發表於2019-07-23
CanvasJS動畫

目錄

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

示例程式碼託管在：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線框模式)：

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

1.2 多表面貼圖

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

首先，每一個面都有一個normal屬性，它是一個歸一化的向量，表明了這個面在空間中的指向，也就是面的法向量。比如上面例子中，字母的正面表面的法向量就是從螢幕內垂直指向螢幕外，也就是+z方向，所以這個面的法向量例項vector3中的z分量一定是正值。從動畫進行的角度看，我們需要使用到的表面是模型的正面，左面和下面。左面實際上就是法向量中x分量為負數的面，下面就是y座標為負數的面，通過法向量的特徵，我們就可以挑選出從特定角度觀察幾何體時看到的效果，例如遍歷幾何體的表面，把所有法向量中z為正數的面挑出來，實際上就相當於在z軸正方向往負方向看時看到的圖形，也就是平面的MARVEL這幾個字母。

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

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

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

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

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的特性，希望感興趣的讀者也可以自行練習，比如把整個片頭動畫都做出來什麼的。

相關文章