当前位置：首页 > 日记 > 正文

HTML53D服装摇摆动画特效

HTML53D服装摇摆动画特效
这也是一个基于HTML5画布的3D动画杰作。这是一个特殊的效果，可以挥舞着风和挥舞着三维服装。这是非常现实的，当我们把鼠标滑过衣服时，衣服会有一个摆动动画。当你点击鼠标时，衣服会更剧烈地摆动。

在线演示源代码下载

HTML代码

xml代码将内容复制到剪贴板。

2D画布上的3D演示
将光标移动到/单击以摆动
这个图书馆的js代码，它主要用来处理3D效果

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
window.p3d = { {
纹理：null，
G：空
}；

p3d.clear =函数（F，W，H）{
var；
G.beginPath（）；
g.fillstyle = F；
g.fillrect（0, 0，W，H）；

}

p3d.num_cmp =功能（A，B）{ return a；}

p3d.drawtriangle =功能（POSS，UV，shade_clr）{
无功W = this.texture.width；
var H = this.texture.height；

var；

var { 1 { 0 }，0 }，1 }；
VaR VBD = { POSS { 2 }。X POSS { 0 }。X，POSS { 2 }。Y POSS { 0 }。Y }；

VaR VA = {乌布苏{ 1 }。U型UV { 0 }。U、UV { 1 }。V乌布苏{ 0 }。V }；
VaR VB = {乌布苏{ 2 }。U型UV { 0 }。U、UV { 2 }。V乌布苏{ 0 }。V }；

VA { 0 } = w；
弗吉尼亚州{ 1 } = h；

VB { 0 } = w；
VB { 1 } = h；

var m =新的M22（）；
m._11 = VA { 0 }；
m._12 = VA { 1 }；
m._21 = VB { 0 }；
m._22 = VB { 1 }；

VaR IM = m.getinvert（）；
如果（！IM）返回false；

var a =我。_11 * VAD { 0 } +我。_12 * VBD { 0 }；
var b =我。_21 * VAD { 0 } +我。_22 * VBD { 0 }；

var c =我。_11 * VAD { 1 } +我。_12 * VBD { 1 }；
var a我。_21 * VAD { 1 } +我。_22 * VBD { 1 }；

Var Wu =紫{ 0 }。U×W；
VaR HV = UV { 0 }。V H；
吴；
吴；

G.save（）；

G.beginPath（）；
G.moveTo（POSS { 0 }。X，POSS { 0 }。Y）；
G.lineTo（POSS { 1 }。X，POSS { 1 }。Y）；
G.lineTo（POSS { 2 }。X，POSS { 2 }。Y）；
G.clip（）；

G.transform（A，C，B，D，POSS { 0 }。X杜，POSS { 0 }。Y DV）；

界限
VaR BX = {吴，吴+ VA { 0 }，{ 0 } }吴+ VB；
var = HV，HV +弗吉尼亚州{ 1 }，HV + VB { 1 } }；

Bx.sort（P3D。num_cmp）；
By.sort（P3D。num_cmp）；

VaR BW = BX { 2 } - BX { 0 }；
{ {由{ 2 } } -由{ 0 }；

（如果（BX { 0 } + BW）<=（W-1）BW + +）；
（如果（由{ 0 } + BH）<=（H-1）BH + +）；
如果（BX { 0 } > = 1）{ BX { 0 }——；BW ++；}
如果（由{ 0 } = 1）{ 0 } }；

G.drawImage（this.texture，BX { 0 }，由{ 0 }，BW，BH，BX { 0 }，由{ 0 }，BW，BH）；

如果（shade_clr）{
g.fillstyle = shade_clr；
g.fillrect（BX { 0 }，由{ 0 }，BW，BH）；
}

G.restore（）；

返回true；
}

p3d.drawtestbyindexbuffer =功能（pos_buf，ix_buf，剔除）{
var；

如果（（ix_buf。长度为3）！= 0）
抛出无效索引缓冲区长度！；

VaR len = ix_buf。长度/ 3；

var i，IBASE，波动；
var，{ }，{，}，}；
g.strokewidth = 1；
为（i = 0，IBASE = 0；我< len；+ +我）
{
波动= ix_buf { IBASE + } << 2；
POSS { 0 }，{ x = pos_buf波动+ }；
POSS { 0 } { } Y = pos_buf波动；

波动= ix_buf { IBASE + } << 2；
POSS { 1 }，{ x = pos_buf波动+ }；
POSS { 1 } { } Y = pos_buf波动；

波动= ix_buf { IBASE + } << 2；
POSS { 2 }，{ x = pos_buf波动+ }；
POSS { 2 } { } Y = pos_buf波动；

跨产品的z分量< 0

var { 1 { } 0；
0＝1；
var = 2 { 1 }；
var = 2 { 1 }；

var卡尔= (((((((斧* CY）-（唉* CX））*剔除）＜0）；

G.beginPath（）；
g.strokestyle =剔除# 592 # 0f0 ；
G.moveTo（POSS { 0 }。X，POSS { 0 }。Y）；
G.lineTo（POSS { 1 }。X，POSS { 1 }。Y）；
G.lineTo（POSS { 2 }。X，POSS { 2 }。Y）；
G.lineTo（POSS { 0 }。X，POSS { 0 }。Y）；
G.stroke（）；
}
}

p3d.drawbyindexbuffer =功能（pos_buf，ix_buf，tx_buf，剔除，z_clip）{
无功功率；
无功color_polyn =！this.texture；
如果（这个纹理）{
W = this.texture.width；
H = this.texture.height；
}

var；
var m =新的M22（）；

如果（！Culling) culling = 0;

如果（（ix_buf。长度为3）！= 0）
抛出无效索引缓冲区长度！；

var i，IBASE，波动，tbase，POSS = { { }，{ }，{ } }；
VaR len = ix_buf。长度/ 3；
无功uv_0u，uv_0v，uv_1u，uv_1v，uv_2u，uv_2v；

为（i = 0，IBASE = 0；我< len；+ +我）
{
tbase = ix_buf { IBASE + } << 1
波动= tbase << 1；
POSS { 0 }，{ x = pos_buf波动+ }；uv_0u = tx_buf { tbase + }；
POSS { 0 }，{ y = pos_buf波动+ }；uv_0v = tx_buf { tbase }；
如果（z_clip（pos_buf {波动} 1）{ IBASE）= 2；继续；}

tbase = ix_buf { IBASE + } << 1
波动= tbase << 1；
POSS { 1 }，{ x = pos_buf波动+ }；uv_1u = tx_buf { tbase + }；
POSS { 1 }，{ y = pos_buf波动+ }；uv_1v = tx_buf { tbase }；
如果（z_clip（pos_buf波动} { 1））{ + IBASE；继续；}

tbase = ix_buf { IBASE + } << 1
波动= tbase << 1；
POSS { 2 }，{ x = pos_buf波动+ }；uv_2u = tx_buf { tbase + }；
POSS { 2 }，{ y = pos_buf波动+ }；uv_2v = tx_buf { tbase }；
如果（z_clip（pos_buf { } {继续波动1））；}

var { 1 { 0 }，0 }，1 }；
VaR VBD = { POSS { 2 }。X POSS { 0 }。X，POSS { 2 }。Y POSS { 0 }。Y }；

var { 2 { 1 }，x 1，} 2；

跨产品的z分量< 0
如果(((((((((( VAD { 0 }×VCD { 1 }）-（VAD { 1 }×VCD { 0 }））*剔除）<< 0）
继续；

如果（color_polyn）{
g.fillstyle = uv_0u；

G.beginPath（）；
G.moveTo（POSS { 0 }。X，POSS { 0 }。Y）；
G.lineTo（POSS { 1 }。X，POSS { 1 }。Y）；
G.lineTo（POSS { 2 }。X，POSS { 2 }。Y）；
G.fill（）；
继续；
}

VaR VA = { uv_1u - uv_0u，uv_1v - uv_0v }；
VaR VB = { uv_2u - uv_0u，uv_2v - uv_0v }；

VA { 0 } = w；
弗吉尼亚州{ 1 } = h；

VB { 0 } = w；
VB { 1 } = h；

m._11 = VA { 0 }；
m._12 = VA { 1 }；
m._21 = VB { 0 }；
m._22 = VB { 1 }；

VaR IM = m.getinvert（）；
如果（！im）{继续；}

var a =我。_11 * VAD { 0 } +我。_12 * VBD { 0 }；
var b =我。_21 * VAD { 0 } +我。_22 * VBD { 0 }；

var c =我。_11 * VAD { 1 } +我。_12 * VBD { 1 }；
var a我。_21 * VAD { 1 } +我。_22 * VBD { 1 }；

Var Wu = uv_0u * W；
VaR HV = uv_0v×h；
吴；
吴；

G.save（）；

G.beginPath（）；
G.moveTo（POSS { 0 }。X，POSS { 0 }。Y）；
G.lineTo（POSS { 1 }。X，POSS { 1 }。Y）；
G.lineTo（POSS { 2 }。X，POSS { 2 }。Y）；
G.clip（）；
G.transform（A，C，B，D，POSS { 0 }。X杜，POSS { 0 }。Y DV）；

界限
VaR BX = {吴，吴+ VA { 0 }，{ 0 } }吴+ VB；
var = HV，HV +弗吉尼亚州{ 1 }，HV + VB { 1 } }；

Bx.sort（P3D。num_cmp）；
By.sort（P3D。num_cmp）；

VaR BW = BX { 2 } - BX { 0 }；
{ {由{ 2 } } -由{ 0 }；

（如果（BX { 0 } + BW）<=（W-1）BW + +）；
（如果（由{ 0 } + BH）<=（H-1）BH + +）；
如果（BX { 0 } > = 1）{ BX { 0 }——；BW ++；}
如果（由{ 0 } = 1）{ 0 } }；

G.drawImage（this.texture，BX { 0 }，由{ 0 }，BW，BH，BX { 0 }，由{ 0 }，BW，BH）；
*
如果（shade_clr）{
g.fillstyle = shade_clr；
g.fillrect（BX { 0 }，由{ 0 }，BW，BH）；
}
* /
G.restore（）；

}

}

功能vec3（_x，_y，_z）
{
这_x | | x = 0；
这_y | | y = 0；
这_z | | Z = 0；
}

vec3.prototype = { {
函数（）{
这个= x =这个= z = 0；
}，

子：函数（v）{
这个X = v.x；
这Y = y；
这Z = z；

返回此；
}，

添加：函数（v）{
这个X = v.x；
这Y = y；
这Z = z；

返回此；
}，

没有源：功能（v）{
这个X = v.x；
这Y = y；
这Z = z；

返回此；
}，

规范：函数（）{
返回Math.sqrt（这个X，X + Y *这这。。Y +本。Z *本。Z）；
}，

标准化：函数（）{
VaR NRM = Math.sqrt（这个X，X + Y *这这。。Y +本。Z *本。Z）；
如果（NRM！= 0）
{
这个X / = NRM；
这Y / = NRM；
这Z / = NRM；
}
返回此；
}，

Smul：函数（K）{
这个；
这个；
这个；

返回此；
}，

DpWith：功能（v）{
退货。X v.x +本。Y * y + z，z *；
}，

Cp：函数（v，w）{
这个X =（w.y * z）-（w.z * y）；
这个y =（w.z * v.x）-（w.x * z）；
，Z =（w.x * y）-（w.y * v.x）；

返回此；
}，

说明：函数（）{
返回这个。
}
}

函数M（CPY）
{
如果（CPY）
this.copyfrom（CPY）；
{其他
this.ident（）；
}
}

m44.prototype = { {
识别：函数（）{
这个_12 =这。_13 =这_14 = 0；
这个_21 =这。_23 =这_24 = 0；
这个_31 =这。_32 =这_34 = 0；
这个_41 =这。_42 =这_43 = 0；

这个_11 =，=这_22。_33 =这_44 = 1；

返回此；
}，

没有源：功能（M）{
这_11 = m._11；
这_12 = m._12；
这_13 = m._13；
这_14 = m._14；

这_21 = m._21；
这_22 = m._22；
这_23 = m._23；
这_24 = m._24；

这_31 = m._31；
这_32 = m._32；
这_33 = m._33；
这_34 = m._34；

这_41 = m._41；
这_42 = m._42；
这_43 = m._43；
这_44 = m._44；

返回此；
}，

transvec3：函数（x，y，z，）{
出{ 0 } = X *本。_11 + Y + Z * *。_21本。_31 + _41本；
出{ 1 } = X *本。_12 + Y + Z * *。_22本。_32 + _42本；
出{ 2 } = X *本。_13 + Y + Z * *。_23本。_33 + _43本；
出{ 3 } = X *本。_14 + Y + Z * *。_24本。_34 + _44本；
}，

transvec3rot：函数（x，y，z，）{
出{ 0 } = X *本。_11 + Y + Z * *。_21 _31本；
出{ 1 } = X *本。_12 + Y + Z * *。_22 _32本；
出{ 2 } = X *本。_13 + Y + Z * *。_23 _33本；
}，

PerspectiveLH：功能（VW，VH，z_near，z_far）{
这个_11 = 2 * z_near /大众；
这_12 = 0；
这_13 = 0；
这_14 = 0；

这_21 = 0；
这个_22 = 2 * z_near / VH；
这_23 = 0；
这_24 = 0；

这_31 = 0；
这_32 = 0；
这个_33 = z_far /（z_far-z_near）；
这_34 = 1；

这_41 = 0；
这_42 = 0；
这个_43 = z_near * z_far /（z_near-z_far）；
这_44 = 0；

返回此；
}，

lookatlh：功能（AUP，纨绔子弟，AAT）{
VaR AX =新vec3（）；
VaR AY =新vec3（）；

VaR AZ =新vec3（AAT，X，Y，Z AAT AAT。。）；
AZ.sub（从）规范（）；

AX.cp（AUP，AZ）规范（）；
AY.cp（AZ，AX）；

这个_11 = AX。X；这。_12 =是的。X；这。_13 = AZ。X；这_14 = 0；
这个_21 = AX。Y；这。_22 =是的。Y；这。_23 = AZ。Y；这_24 = 0；
这个_31 = AX。Z；这。_32 =是的。Z；这。_33 = AZ。Z；这_34 = 0；

这_41 = -afrom.dpwith（AX）；
这_42 = -afrom.dpwith（唉）；
这_43 = -afrom.dpwith（AZ）；
这_44 = 1；

返回此；
}，

功能多：（A，B）{
这个_11 = a._11 * b._11 + a._12 * b._21 + a._13 * b._31 + a._14 * b._41；
这个_12 = a._11 * b._12 + a._12 * b._22 + a._13 * b._32 + a._14 * b._42；
这个_13 = a._11 * b._13 + a._12 * b._23 + a._13 * b._33 + a._14 * b._43；
这个_14 = a._11 * b._14 + a._12 * b._24 + a._13 * b._34 + a._14 * b._44；

这个_21 = a._21 * b._11 + a._22 * b._21 + a._23 * b._31 + a._24 * b._41；
这个_22 = a._21 * b._12 + a._22 * b._22 + a._23 * b._32 + a._24 * b._42；
这个_23 = a._21 * b._13 + a._22 * b._23 + a._23 * b._33 + a._24 * b._43；
这个_24 = a._21 * b._14 + a._22 * b._24 + a._23 * b._34 + a._24 * b._44；

这个_31 = a._31 * b._11 + a._32 * b._21 + a._33 * b._31 + a._34 * b._41；
这个_32 = a._31 * b._12 + a._32 * b._22 + a._33 * b._32 + a._34 * b._42；
这个_33 = a._31 * b._13 + a._32 * b._23 + a._33 * b._33 + a._34 * b._43；
这个_34 = a._31 * b._14 + a._32 * b._24 + a._33 * b._34 + a._34 * b._44；

这个_41 = a._41 * b._11 + a._42 * b._21 + a._43 * b._31 + a._44 * b._41；
这个_42 = a._41 * b._12 + a._42 * b._22 + a._43 * b._32 + a._44 * b._42；
这个_43 = a._41 * b._13 + a._42 * b._23 + a._43 * b._33 + a._44 * b._43；
这个_44 = a._41 * b._14 + a._42 * b._24 + a._43 * b._34 + a._44 * b._44；

返回此；
}，

函数（x，y，z）{
这个_11 = 1；这个_12 = 0；这个_13 = 0；这_14 = 0；
这个_21 = 0；这个_22 = 1；这个_23 = 0；这_24 = 0；
这个_31 = 0；这个_32 = 0；这个_33 = 1；这_34 = 0；

这个_41 = x；这。_42 = Y；这。_43 = Z；这_44 = 1；
返回此；
}，

transpose33：函数（）{
var t；

这_12 T =；
这本_21。_12 =；
这_21 = T；

这_13 T =；
这本_31。_13 =；
这_31 = T；

这_23 T =；
这本_32。_23 =；
这_32 = T；

返回此；
}，

样式旋转
glrotate：函数（x，y，z的角度）{
var = Math.sin（角）；
var c = math.cos（角度）；

var；
var；
VaR ZZ = Z×Z；
var；
VaR YZ = Y×Z；
VaR ZX = Z××；
VaR xs = X *；
var；
VaR ZS = Z的；
无功one_c = 1 C；
*
这个_11 =（one_c * XX）+ C；
这个_21 =（one_c * XY）- ZS；
这个_31 =（one_c * ZX）+ YS；
这_41 = 0；

这个_12 =（one_c * XY）+ ZS；
这个_22 =（one_c * YY）+ C；
这个_32 =（one_c * YZ）xs；
这_42 = 0；

这个_13 =（one_c * ZX）- YS；
这个_23 =（one_c * YZ）+ X；
这个_33 =（one_c * ZZ）+ C；
这_43 = 0；

这_14 = 0；
这_24 = 0；
这_34 = 0；
这_44 = 1；
* /

这个_11 =（one_c * XX）+ C；
这个_12 =（one_c * XY）- ZS；
这个_13 =（one_c * ZX）+ YS；
这_14 = 0；

这个_21 =（one_c * XY）+ ZS；
这个_22 =（one_c * YY）+ C；
这个_23 =（one_c * YZ）xs；
这_24 = 0；

这个_31 =（one_c * ZX）- YS；
这个_32 =（one_c * YZ）+ X；
这个_33 =（one_c * ZZ）+ C；
这_34 = 0；

这_41 = 0；
这_42 = 0；
这_43 = 0；
这_44 = 1；

返回此；
}

}

矩阵 / / 2x2
M22（）函数
{
这_11 = 1；
这_12 = 0；
这_21 = 0；
这_22 = 1；
}

m22.prototype.getinvert =功能（）
{
var =新的M22（）；
VAR DET =这。_11 *本。_22这。_12 *本。_21；
如果（DET > -0.0001 DET＜0.0001）
返回null；

出来。_11 =这_22 / DET；
出来。_22 =这_11 / DET；

出来。_12 = -这_12 / DET；
出来。_21 = -这_21 / DET；

回来了；
}

3d服装动画js代码

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
ClothApp（）函数
{
this.canvas = document.getelementbyid（简历）；

色。G = this.canvas.getcontext（2D）；

新图像（）；
this.texture1 =特；
tex.onload =函数（）{ _this.start（）；}；
tex.src =20090226032826。gif；

新图像（）；
this.texture2 =特；
tex.onload =函数（）{ _this.start（）；}；
tex.src =20090226032825。png；

this.mloadcount = 2；
this.mtickcount = 0；

这G = 0.53；
this.g1 = 0.45；
this.mprojmat = null；
this.mviewmat = null；
this.mviewfrom =新vec3（）；
这个mviewfrom y = 150；
这个mviewfrom Z = 1000；
this.mviewfroma =（新vec3（）），CopyFrom（这个。mviewfrom）；

this.mviewangle = 0；

this.mnlen = 0；
this.mnodes = { }；
this.mrendertris = null；

this.mltnode = null；
this.mrtnode = null；

this.mltnodev =新vec3（）；
this.mrtnodev =新vec3（）；

this.mwforce =新vec3（）；
this.frate = 15；

无功_this =这；
}

clothapp.zsortcmp =功能（T1，T2）{
返回t2.sortkey - t1.sortkey；
}

clothapp.prototype = { {
开始：函数（）{
如果（--this.mloadcount！= 0）返回；

this.vup =新vec3（0, 1, 0）；
this.vat =新vec3（0, 80, 0）；

this.mviewport = { }；
这个mviewport W = 480；
这个mviewport H = 300；
this.mviewport.ow = 240；
this.mviewport.oh = 150；
this.setuptransforms（）；

（180）this.generatecloth；
This.generateRenderTriangles（）；

无功_this =这；
This.canvas.addEventListener（MouseMove
This.canvas.addEventListener（mouseDown

Window.setTimeout（function（）{ _this.oninterval（）；}，这个修士）；
}，

OnInterval：函数（）{
这mtickcount + +；

/ /本。mltnodev。Z = Math.cos（这。mtickcount×0.1）×2；

This.tick（）；
this.updateposition（）；
This.draw（）；

无功_this =这；
Window.setTimeout (function () {_this.onInterval ();}, this.frate);
}，

OnMouseMove：功能（e）{
如果（e.clientx | | e.clientx = = 0）
this.mviewangle =（e.clientx - 240）* 0.004；

如果（e.clienty | | e.clienty = = 0）
这个mviewfroma。Y = 90 -（e.clienty - 0）* 0.8；
}，

OnClick：功能（e）{
如果（e.clientx | | e.clientx = = 0）
{
这个mwforce Z = 4；
这个mwforce。x =（e.clientx - 240）* -0.03；
}
}，

滴答：函数（）{
this.updateviewtrans（这个。mviewangle）；

VaR nlen = this.mnodes.length；
变量I和ND；
为（i = 0；i < nlen；i++）
{
ND =这模型{我}；
钕f.x = 0；
钕f.z = 0；
如果（nd.flags 4）
钕-this.g1 fission yield裂变产额=；
其他的
二。fission yield裂变产额=本。G；

Nd.F.add（这个。mwforce）；
}

This.mWForce.zero（）；
this.applytension（）；

为（i = 0；i < nlen；i++）
{
ND =这模型{我}；

如果（（Nd，标记1）！= 0）{
Nd.F.sub（Nd，F）；
}

Nd.velo.add（Nd，F）；
}

This.mLTNode.velo.copyFrom（这个。mltnodev）；
This.mRTNode.velo.copyFrom（这个。mrtnodev）；
}，

updateposition：函数（）{
VaR nlen = this.mnodes.length；
变量I和ND；
为（i = 0；i < nlen；i++）
{
ND =这模型{我}；

如果（（Nd，标记1）！= 0）{
0；
0；
0；
}

Nd.pos.add（Nd，速度）；
Nd.velo.sub（Nd，CV）；
0；
0；
0；

（0.95）nd.velo.smul；
}
}，

绘图：函数（）{
P3D.clear (#000
This.transformPolyns（）；

This.mRenderTris.sort（clothapp。zsortcmp）；
VaR len = this.mrendertris.length；
无功功率；
对于（var i = 0；i < i；i + +）{
T =这mrendertris {我}；

如果（p3d.texture！= t.texture）
p3d.texture = t.texture；

未定义的；
如果（t.lighting t.shade > 0.01）
SH =RGBA（0,0,0，+ t.shade + ）；
p3d.drawtriangle（t.tposs，t.uvs，SH）；
}
}，

applytension：函数（）{
变量I，k，ND；
var v =新vec3（）；
VaR nlen = this.mnodes.length；
无功naturallen = this.mnlen；

为（k = 0；K＜nlen；K + +）
{
ND =这模型{ K }；
var；

对于（i = 0；i < 4；i +）
{
链接= { }；
如果（！丁腈橡胶）继续；

VaR len = v.copyfrom（NBR，POS）。Sub（Nd，POS）的诺姆（）；
无功dlen =莱恩- naturallen；
如果（dlen > 0）{
V.smul（dlen * 0.5 /长度）；

f.x = v.x；
fission yield裂变产额= y；
f.z = z；
Nd.cv.add（v.smul（0.8））；
}
}
}
}，

setuptransforms：函数（）{
this.mprojmat =新的M44（）；
this.mprojmat.perspectivelh（24, 15, 10，9000）；

this.mviewmat =新的M44（）；
（0）this.updateviewtrans；
}，

updateviewtrans：功能（RY）{
这个mviewfroma。Z = math.cos（RY）* 380；
这个mviewfroma。x = Math.sin（RY）* 380；

（0.7）this.mviewfrom.smul；
这个mviewfrom。x =这。mviewfroma。××0.3；
这个mviewfrom。Y =这。mviewfroma Y×0.3；
这个mviewfrom。Z =这。mviewfroma Z×0.3；

This.mViewMat.lookAtLH（this.vup，this.mviewfrom，这个增值税）；
}，

generatecloth：功能（base_y）{
var列= 9；
var行= 8；

var步骤= 22；
this.mnlen =步* 0.9；
无功W =（cols-1）*步；

变量I；
对于（k = 0；k行；k + +）
{
为（i = 0；i <列；i++）
{
VaR ND =新ClothNode（）；
ND。pos.x = -（W / 2）+我一步；
ND。pos.y = base_y K *步 / 2；
ND。pos.z = K * 16；

二。紫外线。U =我/（cols-1）；
二。紫外线。V = K /（rows-1）；

如果（i = 0）{
无功prv_nd =这个模型{这个模型。length-1 }；
prv_nd链接。{ 1 } =钕；
二。链接{ 0 } = prv_nd；
}

如果（k > 0）{
无功up_nd =这个模型{一}长度。模型；
up_nd链接。{ 4 } =钕；
二。链接{ 3 } = up_nd；
}

如果（i）！= 0我！= 4我！=（cols-1））
nd.flags | = 4；

This.mNodes.push（ND）；
}
}

左上角和右上角
这个模型{ 0 }。标志1 | =；
这个模型{ 4 }。标志1 | =；
这个模型cols-1 } {旗帜| = 1；

this.mltnode =这个模型{ 0 }；
This.mRTNode = this.mNodes{cols-1};
}，

generaterendertriangles：功能（）
{
如果（this.mrendertris this.mrendertris = { }！）；

var i；
VaR钕；
VaR nlen = this.mnodes.length；

为（i = 0；i < nlen；i++）
{
ND =这模型{我}；
如果（连接{ { 1 } }，链接{ 1 } }。链接{ 4 }）{
var t =新RenderTriangle（）；
t.texture = this.texture1；

t.poss { 0 } = nd.pos；
t.poss { 1 } = ND。链接{ 1 }。POS；
t.poss { 2 } = { 1 }和链接。链接。{ 4 }。POS；

t.uvs { 0 } = nd.uv；
t.uvs { 1 } = ND。链接{ 1 }。紫外；
t.uvs { 2 } = ND。链接{ 1 }，{ 4 }外链接；

This.mRenderTris.push（T）；

T =新RenderTriangle（）；
t.texture = this.texture1；

t.poss { 0 } = nd.pos；
t.poss { 1 } = { 1 }和链接。链接。{ 4 }。POS；
t.poss { 2 } = ND。链接{ 4 }。POS；

t.uvs { 0 } = nd.uv；
t.uvs { 1 } = ND。链接{ 1 }，{ 4 }外链接；
t.uvs { 2 } = ND。链接{ 4 }。紫外；

This.mRenderTris.push（T）；
}
}

this.addbgtriangles（这个模型{ 0 }。pos.y）；
}，

addbgtriangles：功能（通过）{
var列= 4；
var，x，y，SZ = 110；
VaR牛= -（列* SZ） / 2；
VaR盎司＝-（列* SZ） / 2；

为（y = 0；Y＜列；Y + +）{
为（x = 0；x＜列；x++）{
var =（（x + y）1）* 0.5；
T =新RenderTriangle（）；
t.texture = this.texture2；

t.poss { 0 } =新vec3（牛X *尺码，，盎司+ Y *尺码）；
t.poss { 1 } =新vec3（牛X *尺码+尺码，，盎司+ Y *尺码）；
t.poss { 2 } =新vec3（牛X *尺码，，盎司+ Y *尺码+深圳）；

t.uvs { 0 } = {你：0、五：BV }；
t.uvs { 1 } = {你：0.5、五：BV }；
t.uvs { 2 } = {你：0、五：BV + 0.5 }；

（如果（X = = 1 | |（Y = = 1 = = 2 x = = 2）| |））
This.modifyRoofUV（t，x = 2，BV）；

t.lighting = false；
t.zbias = 0.5；
This.mRenderTris.push（T）；

T =新RenderTriangle（）；
t.texture = this.texture2；

t.poss { 0 } =新vec3（牛X *尺码，，盎司+ Y *尺码+深圳）；
t.poss { 1 } =新vec3（牛X *尺码+尺码，，盎司+ Y *尺码）；
t.poss { 2 } =新vec3（牛X *尺码+尺码，，盎司+ Y *尺码+深圳）；

t.uvs { 0 } = {你：0、五：BV + 0.5 }；
t.uvs { 1 } = {你：0.5、五：BV }；
t.uvs { 2 } = {你：0.5、五：BV + 0.5 }；

（如果（X = = 1 | |（Y = = 1 = = 2 x = = 2）| |））
This.modifyRoofUV（t，x = 2，BV）；

t.lighting = false；
t.zbias = 0.5；
This.mRenderTris.push（T）；

}
}
}，

ModifyRoofUV：功能（t，RV，BV）{
如果（RV）{
t.uvs { 0 }。U = 0.5 t.uvs { 0 }。U；
t.uvs { 1 }。U = 0.5 t.uvs { 1 }。U；
t.uvs { 2 }。U = 0.5 t.uvs { 2 }。U；
}

t.uvs { 0 }。U = 0.5；
t.uvs { 1 }。U = 0.5；
t.uvs { 2 }。U = 0.5；

如果（RV）{
t.uvs { 0 }。V = 0.5 t.uvs { 0 }。V +公司+ BV；
t.uvs { 1 }。V = 0.5 t.uvs { 1 }。V +公司+ BV；
t.uvs { 2 }。V = 0.5 t.uvs { 2 }。V +公司+ BV；
}

}，

transformpolyns：函数（）{
无功反=新的M44（）；
trans.mul（this.mviewmat，这个mprojmat）；

VaR HW = this.mviewport.ow；
VaR HH = this.mviewport.oh；

VaR len = this.mrendertris.length；
var t；
VaR组合= { 0, 0, 0，0 }；
对于（var i = 0；i < i；i + +）{
T =这mrendertris {我}；
对于（var = 0；k＜3；k + +）{
trans.transvec3（SPOS，t.poss {K }。X，t.poss { } Y，K，K t.poss { }。Z）；

无功W =内{ 3 }；
原理：{ 0 } / = W；
原理：{ 1 } / = W；
原理：{ 2 } / = W；

原理：{ 0 } =这。mviewport。W；
原理：{ 1 } = -这。mviewport。H；
原理：{ 0 } =硬件；
原理：{ 1 } = HH；

t.tposs {克}。x =内{ 0 }；
t.tposs {克}。Y =内{ 1 }；
t.tposs {克}。Z =内{ 2 }；
}

VaR V1 =（新vec3（）），CopyFrom（t.poss { 1 }）。Sub（t.poss { 0 }）规范（）；
VaR V2 =（新vec3（）），CopyFrom（t.poss { 2 }）。Sub（t.poss { 1 }）规范（）；
var n =（新vec3（））Cp（V1，V2）；

trans.transvec3rot（SPOS，n.x，N.y，N.z）；

如果（t.lighting）{
如果（SPOS { 2 } > 0）
t.shade = 0.8
{其他
t.shade = 0.1 * 0.6纽约；
如果（t.shade＜0）t.shade = 0；
}
}

t.sortkey = math.floor（（t.tposs { 0 }。Z + t.tposs { 1 }。Z + t.tposs { 2 }。Z + t.zbias）* 1000）；
}
}
}

ClothNode（）函数
{
this.flags = 0；
this.pos =新vec3（）；
this.velo =新vec3（）；
this.cv =新vec3（）；
这个新的vec3 f（）；
this.links = {零，零，零，零}；
this.uv = {你：0、五：0 }；
}

RenderTriangle（）函数
{
this.texture = null；
this.poss =新阵（3）；
this.tposs = {新vec3（），新的vec3（），新的vec3（）}；
this.uvs = { {你：0、五：0 }，{你：0、五：0 }，{你：0、五：0 } }；
this.shade = 0；
this.lighting =真；
this.zbias = 0；

this.sortkey = 0；
}

以上是HTML5 3D服装摆动动画特效源代码介绍，需要进行更深入的研究，下载源码学习。
动画特效摇摆电脑软件HTML53D  

热门内容

相关文章

对excel2013自动功能

对excel2013自动功能

功能,电脑软件，自动校正功能 在Excel 2013自动校正功能，类似的话，可以自动纠正拼写错误的输入文本时，只要这个功能变化不大，一些特殊的功能是可以实现的。例如，我们在输入数据，有些内容是重复的，那么你可以使用实现自动校正；；快速输入，这里我们以输…

如何绘制汽车轮胎的标志

如何绘制汽车轮胎的标志

绘制,标志,电脑软件，AI只是画一个轮胎的标志 软件名称：Adobe Illustrator CS6（AI CS6）简化绿色中文版（32位+ 64位）软件大小：205mb更新时间：2014-05-11 1、在ai软件中，新建一个800×800的文件，选择椭圆工具，按住Shift画两个圆形图形，并填充颜色，如图所…

PS图象处理软件创造了一个神秘的镂

PS图象处理软件创造了一个神秘的镂

图象,处理软件,创造了,神秘,电脑软件，先看最后效果： 使用工具：PS图象处理软件CS4注：本文中使用的快捷键在英文输入状态都是有效的。第一步：打开PS图象处理软件CS4，执行{打开}文件mdash；命令，打开一幅手掌中，如下图所示。你可以在大学论坛材料展示区…

如何在PPT中画出树型PPT制作教程

如何在PPT中画出树型PPT制作教程

树型,画出,制作教程,如何在,电脑软件，如果我们想在PPT中画一棵树，我们需要什么样的操作让小编辑器告诉你如何在PPT中画一棵树。 用PPT绘制树的一种方法： 首先在插入选项卡；形状；选择圆角矩形，并在编辑区域中绘制，如图所示。 然后，它对圆角矩形的…

PS使字体沿着路径

PS使字体沿着路径

路径,字体,电脑软件,PS，本教程主要使用PS图象处理软件创建字体教程沿路径，主要使用PS路径的技巧和方法相对简单。如果你需要朋友，你可以参考这篇文章，让我们看一看。 步： 1，打开PS软件，创建一个空白文档，使用椭圆选框工具绘制一个圆形选区，然后输…

如何比较js中两个相等实例代码的JS

如何比较js中两个相等实例代码的JS

对象,实例代码,两个,电脑软件,js，在JS前端面试过程中，经常遇到这样的笔试问题。如何比较js中的两个JSON对象相当于实例代码。接下来，萧边需要一点时间整理一下看看。 1。首先准备三种工具方法，以确定它是否是对象类型，不管它是数组还是获取对…

在PS图象处理软件自由变换功能详解

在PS图象处理软件自由变换功能详解

变换,图象,详解,处理软件,功能，在PS图象处理软件，自由变换；它是一个制造的有力手段，及其用法的掌握会给工作带来很大的方便。我们都知道在PS中编辑（编辑）是一种变换菜单，子菜单包含缩放、旋转等，适合初学者了解这些菜单倾向于死记硬背的学习，但效果…

PS图象处理软件是如何绘制一个白色

PS图象处理软件是如何绘制一个白色

绘制,咖啡杯,图象,处理软件,白色，ps是最常用的软件，很多人都在做，但是效果不是很好，今天我们来学习用PS做一个咖啡杯。 软件名称：Adobe中国PS图象处理软件6汉化免费版软件大小：107mb更新时间：2013-04-19 1。画一个浅蓝色的背景，在地图上画一个白…

如何使用字符统计功能PPT2007PPT20

如何使用字符统计功能PPT2007PPT20

教程,字符统计,如何使用,功能,电脑软件，对于PPT的制作，如何算在下面的幻灯片的数目字介绍PPT2007采用字数的功能。 PPT2007使用计数的数目字的方法： 首先，让我们打开ppt文件，然后单击在文件的右上角；微软office图标，点击选项，点击后拉。 然后我…

用一切构建自己的文件搜索服务器

用一切构建自己的文件搜索服务器

服务器,文件搜索,自己的,电脑软件,用一切，搜索服务的建立 要建立搜索服务，您需要在网络上的每台计算机上安装所有软件，并安装一个多语言包（包括简体中文），因为一切都是日本软件，默认情况下显示日本界面，运行后很难理解。因此，有必要切换界面简体中…

js操作时间的简要介绍——UNIX时间

js操作时间的简要介绍——UNIX时间

时间戳,操作,简要,时间,电脑软件，知识准备 GMT (Greenwich Mean Time) - Greenwich time.UTC (Universal Time Code) - international coordination time.PST (Pacific Standard Time, Pacific Standard Time). UTC出现的时间比格林尼治…

oracleoradb10g_home1tnslistener

oracleoradb10g_home1tnslistener

服务,无法启动,如何解决,电脑软件,oracleoradb10g_home1tnslistener，可能有三种情况，因为oracleoradb10g_home1tnslistener服务无法启动： 1.listener.ora文件配置错误，无法启动 2。相关的环境变量设置得不好。 三.客户端服务器删除相关注册…