蒙皮動畫:通過模擬人的運動來模擬3d物體的動畫,遊戲中也經常使用。
1. 製作蒙皮骨骼:
var material = new three.meshbasicmaterial();
mesh = new three.skinnedmesh(geometry,material);
mesh.position.y = 15;
注意這裡的material中的 skinning: true 必須設定為true,否則蒙皮骨骼不隨骨骼運動。
2. 製作骨頭:
var bones =;
var arm = new three.bone();
arm.position.y = - 15;
bones.push(arm);
for(var i = 0 ;i<3;i++));
mesh = new three.skinnedmesh(geometry,material);
mesh.position.y = 15;
注意這裡的material中的 skinning: true 必須設定為true,否則蒙皮骨骼不隨骨骼運動。
2. 製作骨頭:
var bones =;
var arm = new three.bone();
arm.position.y = - 15;
bones.push(arm);
for(var i = 0 ;i<3;i++){
var bone = new three.bone();
bone.position.y = 10;
arm.add(bone);
arm = bone;
bones.push(bone);
注意:這裡的思路是先建立乙個骨頭arm ,然後迴圈建立n塊骨頭,分別新增到前一塊骨頭裡。也就是 bone[0] 新增到arm中,bone[1] 新增到bone[0]中,最終實現乙個骨頭以此連線的整體骨頭arm,後面用到。
注意2:骨頭arm新增到mesh中的起始位置在mesh的中心點,所以這裡可以設定position.y = - mesh的高度的一半,其他bone的位置以次相對新增它的bone。
3.製作骨架:
var skeleton = new three.skeleton(bones);
4.mesh新增骨頭並且骨架附體:
mesh.add(bones[0]);
mesh.bind(skeleton);
5.最後一步設定geometry每個頂點受哪些骨頭的影響以及影響程度:
for ( var i = 0; i < geometry.vertices.length; i ++ ) {
var vertex = geometry.vertices[ i ];
var y = ( vertex.y + 15 );
var skinindex = math.floor( y / 10 );
var skinweight = ( y % 10 ) / 10;
geometry.skinindices.push( new three.vector4( skinindex, skinindex + 1, 0, 0 ) );
geometry.skinweights.push( new three.vector4( 1 - skinweight, skinweight, 0, 0 ) );
注意:這裡var y = ( vertex.y + 15 ); 是因為我們位移mesh時,geometry的vertices的值沒有變化,所以每個值加了mesh的偏移值,geometry的vertices的值沒有變化的解決方法可以設定geometry.verricesneedupdate = true;
注意:這裡的意思每一層的節點受到該層對應的骨頭的影響程度:
案例如下:
骨骼蒙皮動畫
一 基本原理 骨骼動畫的基本原理就是首先控制各個骨骼和關節,再使附在上面的蒙皮 mesh 與其相匹配。乙個角色由作為 的單一網格模型和按照一定層次組織起來的骨骼組成。骨骼層次描述了角色的結構 相鄰的骨骼通過關節連線,並且可以做出相對的運動。這裡要注意的是,骨骼間是具有 父子 關係的,比如,右前臂是右...
關於 骨骼動畫之理解蒙皮演算法
把三維骨骼頂點聯絡至骨骼的位置的過程,稱為蒙皮。蒙皮用的網格是通過頂點聯絡上骨骼,每個頂點可以繫結乙個或者多個骨骼 一般最多允許4根骨骼 若某頂點只繫結至一根骨骼,它就會完全跟隨該骨骼移動。若繫結至多個骨骼,該頂點的位置就等於把它逐一繫結繫結個別骨骼,在通過權重加權平均。能把網格頂點從原來位置 繫結...
計算機動畫 蒙皮筆記
最近剛開始接觸計算機動畫,一片空白,嘗試做了一下3d蒙皮,發現數學真是差得難以想象,矩陣的什麼的全部忘記了,真是接下來該惡補一下基礎了 在這裡把遇到的幾個問題記錄一下。主要參考書目 計算機動畫演算法與技術 3d遊戲 英國人寫的書已經絕版了 3d遊戲引擎設計 實時計算機圖形學應用方法 骨骼蒙皮動畫 s...