?2016-2026 Matools All rights reserved,
粵ICP備17059708號
目錄
* 一. 模型的制作 <https://www.cnblogs.com/dashnowords/p/11234360.html#一.-模型的制作>
* 1.1 生成字體模型 <https://www.cnblogs.com/dashnowords/p/11234360.html#生成字體模型>
* 1.2 多表面貼圖 <https://www.cnblogs.com/dashnowords/p/11234360.html#多表面貼圖>
* 二. 鏡頭及動畫 <https://www.cnblogs.com/dashnowords/p/11234360.html#二.-鏡頭及動畫>
* 三. 大作業(yè)總結(jié) <https://www.cnblogs.com/dashnowords/p/11234360.html#三.-大作業(yè)總結(jié)>
示例代碼托管在：http://www.github.com/dashnowords/blogs
<https://github.com/dashnowords/blogs/tree/master/Demo/threejs-demo/%E5%B8%A6%E7%9D%80canvas%E5%8E%BB%E6%B5%81%E6%B5%AA%EF%BC%8813%EF%BC%89-demo>
博客園地址：《大史住在大前端》原創(chuàng)博文目錄 <https://www.cnblogs.com/dashnowords/p/10127926.html>
華為云社區(qū)地址：【你要的前端打怪升級指南】
<https://bbs.huaweicloud.com/blogs/8ae7e6420a4611e9bd5a7ca23e93a891>
有了上一篇基礎知識的儲備，本節(jié)就來制作一下簡易版的MARVEL的片頭動畫。【點擊觀看動畫效果】
<https://bbs.huaweicloud.com/blogs/aa483d2cac2111e9b759fa163e330718>
一. 模型的制作
1.1 生成字體模型
字體模型的生成使用到了THREE.TextGeometry，它需要先加載字體文件，然后在回調(diào)函數(shù)中生成字體模型，相當于在THREE.ShapeGeometry
實例上繪制平面圖形，然后再拉伸成為THREE.ExtrudeGeometry拉伸體?；敬a如下：
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,//默認使用的三角面片數(shù)，越多則表面越平滑 bevelEnabled: true,//是否使用倒角
bevelThickness: 10, bevelSize: 8, bevelOffset: 0, bevelSegments: 5 } ); } );
本例中為了在不同的字母表面使用不同的videoTexture
來進行貼圖，所以將6個字母分成3組進行生成，所以在生成過程中需要動態(tài)調(diào)整幾何體的空間位置，避免最后生成的模型都擠在一起。調(diào)整的方法如下：
//geometry指字體模型實例 geometry.computeBoundingBox();
//計算過一次以后，包圍盒屬性就會添加到geometry.boundingBox上，然后就可以以此為依據(jù)進行調(diào)整 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;
調(diào)整的思路就是，通過將x,y,z三個方向都偏移包圍盒自身尺寸的一半，從而達到將定位參考點移動到立方體的幾何中心的目的,tempPos
記錄上一個幾何體總寬度，作為下一個幾何體橫向（x方向）的偏移參考，這樣就可以保證幾何體橫向錯開。設置好參數(shù)后，就可以生成MARVEL
生成的字體模型線框圖(下圖在材料中開啟了wireframe線框模式)：
1.2 多表面貼圖
從上面的線框圖可以看到，字體模型雖然很容易生成，但是使用了超過100個三角面，再用上一節(jié)中的手動貼圖修復的方法顯然是行不通的，所以此處需要想辦法通過程序來自動貼圖。
首先，每一個面都有一個normal屬性，它是一個歸一化的向量，表明了這個面在空間中的指向，也就是面的法向量
。比如上面例子中，字母的正面表面的法向量就是從屏幕內(nèi)垂直指向屏幕外，也就是+z方向，所以這個面的法向量實例vector3中的z
分量一定是正值。從動畫進行的角度看，我們需要使用到的表面是模型的正面，左面和下面。左面實際上就是法向量中x分量為負數(shù)的面，下面就是y
坐標為負數(shù)的面，通過法向量的特征，我們就可以挑選出從特定角度觀察幾何體時看到的效果，例如遍歷幾何體的表面，把所有法向量中z
為正數(shù)的面挑出來，實際上就相當于在z軸正方向往負方向看時看到的圖形，也就是平面的MARVEL這幾個字母。
在不規(guī)則表面貼圖，就像把電影投影到一個不規(guī)則表面進行放映，比如將投影儀的幕布折疊成某個形狀，畫面依舊會以二維投影的形式展現(xiàn)在幕布上。舉個栗子，比如現(xiàn)在要給M和
A這兩個字母的下表面貼圖（都是凹進去的），需要選出的面的法向量特征滿足y < 0，然后求出包圍盒大小后，對應關系如下：
所以貼圖時，需要將素材的y方向（0-1之間的某個數(shù)字）坐標按比例映射到包圍盒z方向，將素材x
方向坐標按比例映射到包圍盒x方向，如上圖所示。有了映射關系，就可以讓程序遍歷表面并自動進行貼圖處理，上圖的貼圖效果最終會是類似下面的樣子：
A的字體模型內(nèi)部有一個封閉空間，其中也有法向量z值小于0的面，它們也會按照同樣的坐標轉(zhuǎn)換標準被貼圖。示例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; }
二. 鏡頭及動畫
變角度觀察立體模型時，透視相機的效果會更逼真一些，本例中使用正交相機進行開發(fā)。關于這兩種相機的使用，直觀的區(qū)別是：
使用透視相機就好比使用者在調(diào)節(jié)一個真實攝像機的參數(shù)來改變出現(xiàn)在鏡頭中的畫面的效果，可以說是一種間接確定拍攝范圍，且它的視場是一個錐形區(qū)域；而正交相機相當于是直接設定拍攝范圍的長寬高，至于鏡頭該在哪不需要關心，它的視場是一個矩形盒子，更像是一種平面投影，也不會有透視造成的變形效果。
正交相機的構(gòu)造函數(shù)如下：
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個參數(shù)來確定一個矩形盒子作為舞臺區(qū)域，在舞臺內(nèi)的就可以顯示，不在舞臺內(nèi)的就不顯示，比如下面示例中如果繞y軸轉(zhuǎn)動字體模型，就會有一部分超出所設定的舞臺區(qū)域：
[](
https://img2018.cnblogs.com/blog/1354575/201907/1354575-20190723204434735-254014144.png
<https://img2018.cnblogs.com/blog/1354575/201907/1354575-20190723204434735-254014144.png>
)
由于正交相機的舞臺是一個矩形盒子，所以無論遠近，投影在前后表面的圖形都是一樣的（透視相機則不同，和真實效果更類似，離得越遠，看到的物體越小），所以調(diào)節(jié)正交相機
position.z通常是達不到預期效果的，只能更新相機參數(shù)的上下左右坐標值改變投影面的大小，也就是正交相機舞臺的正投影面區(qū)域，來模擬z
方向位置的變化造成的視覺效果變化。正交相機的參數(shù)修改后需要顯示調(diào)用一下camera.updateProjectionMatrix( )來讓其生效。
本例中鏡頭變化相關代碼如下(遠近效果通過調(diào)節(jié)相機實現(xiàn)，角度翻轉(zhuǎn)通過操作字體模型組實現(xiàn))：
//模擬相機移動軌跡 function mockCameraTrack() { //1.初始軌跡調(diào)整相機參數(shù)，將鏡頭拉遠 if (camera.right
< windowWidth) { //鏡頭位置 camera.left -= step; camera.right += step; camera.top
+= step; camera.bottom -= step; } //2.到達預設時間時開始反轉(zhuǎn) 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(); }
三. 大作業(yè)總結(jié)
通過大作業(yè)的練習，熟悉了很多three.js的特性，希望感興趣的讀者也可以自行練習，比如把整個片頭動畫都做出來什么的。
熱門工具 換一換