HTML5 3D衣服摇摆动画特效_html5教程技巧-H5教程-PHP中文网

首页

web前端

H5教程

HTML5 3D衣服摇摆动画特效_html5教程技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

3dhtml5

这又是一款基于HTML5 Canvas的3D动画杰作，它是一个可以随风飘动的3D衣服摇摆动画特效，非常逼真。当我们将鼠标滑过衣服时，衣服将会出现摇摆的动画，点击鼠标时，衣服将会更加剧烈地摆动。

在线演示 源码下载

HTML代码

XML/HTML Code复制内容到剪贴板

div style="width:500px;margin:10px auto">
canvas id="cv" width="480" height="300">canvas>
p>"3D on 2D Canvas" demop>
p>move cursor to pan / click to swingp>
div>

P3D库JS代码，主要用来处理3D效果的

JavaScript Code复制内容到剪贴板

window.P3D = {
texture: null,
g: null
};
P3D.clear = function(f, w, h) {
var g = this.g;
g.beginPath();
g.fillStyle = f;
g.fillRect(0, 0, w, h);
}
P3D.num_cmp = function(a,b){return a-b;}
P3D.drawTriangle = function(poss, uvs, shade_clr) {
var w = this.texture.width;
var h = this.texture.height;
var g = this.g;
var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ];
var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ];
var vA = [ uvs[1].u - uvs[0].u , uvs[1].v - uvs[0].v ];
var vB = [ uvs[2].u - uvs[0].u , uvs[2].v - uvs[0].v ];
vA[0] *= w;
vA[1] *= h;
vB[0] *= w;
vB[1] *= h;
var m = new M22();
m._11 = vA[0];
m._12 = vA[1];
m._21 = vB[0];
m._22 = vB[1];
var im = m.getInvert();
if (!im) return false;
var a = im._11 * vAd[0] + im._12 * vBd[0];
var b = im._21 * vAd[0] + im._22 * vBd[0];
var c = im._11 * vAd[1] + im._12 * vBd[1];
var d = im._21 * vAd[1] + im._22 * vBd[1];
var wu = uvs[0].u * w;
var hv = uvs[0].v * h;
var du = wu * a + hv * b;
var dv = wu * c + hv * d;
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 - du, poss[0].y - dv);
// bounds
var bx = [wu, wu+vA[0], wu+vB[0]];
var by = [hv, hv+vA[1], hv+vB[1]];
bx.sort(P3D.num_cmp);
by.sort(P3D.num_cmp);
var bw = bx[2] - bx[0];
var bh = by[2] - by[0];
if ((bx[0]+bw)
if ((by[0]+bh)
if (bx[0] >= 1) {bx[0]--; bw++;}
if (by[0] >= 1) {by[0]--; bh++;}
g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw, bh);
if (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], by[0], bw, bh);
}
g.restore();
return true;
}
P3D.drawTestByIndexBuffer = function(pos_buf, ix_buf, culling) {
var g = this.g;
if ((ix_buf.length%3) != 0)
throw "invalid index buffer length!";
var len = ix_buf.length/3;
var i, ibase, vbase;
var poss = [{},{},{}];
g.strokeWidth = 1;
for (i = 0, ibase = 0;i
{
vbase = ix_buf[ibase++]
poss[0].x = pos_buf[vbase++];
poss[0].y = pos_buf[vbase ];
vbase = ix_buf[ibase++]
poss[1].x = pos_buf[vbase++];
poss[1].y = pos_buf[vbase ];
vbase = ix_buf[ibase++]
poss[2].x = pos_buf[vbase++];
poss[2].y = pos_buf[vbase ];
// z component of cross product
var Ax = poss[1].x - poss[0].x;
var Ay = poss[1].y - poss[0].y;
var Cx = poss[2].x - poss[1].x;
var Cy = poss[2].y - poss[1].y;
var cull = ( (((Ax * Cy) - (Ay * Cx))*culling)
g.beginPath();
g.strokeStyle = cull ? "#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 = function(pos_buf, ix_buf, tx_buf, culling, z_clip) {
var w, h;
var color_polygon = !this.texture;
if (this.texture) {
w = this.texture.width;
h = this.texture.height;
}
var g = this.g;
var m = new M22();
if (!culling) culling = 0;
if ((ix_buf.length%3) != 0)
throw "invalid index buffer length!";
var i, ibase, vbase, tbase, poss = [{},{},{}];
var len = ix_buf.length/3;
var uv_0u, uv_0v, uv_1u, uv_1v, uv_2u, uv_2v;
for (i = 0, ibase = 0;i
{
tbase = ix_buf[ibase++]
vbase = tbase
poss[0].x = pos_buf[vbase++]; uv_0u = tx_buf[tbase++];
poss[0].y = pos_buf[vbase++]; uv_0v = tx_buf[tbase];
if (z_clip && (pos_buf[vbase] 1)) {ibase += 2; continue;}
tbase = ix_buf[ibase++]
vbase = tbase
poss[1].x = pos_buf[vbase++]; uv_1u = tx_buf[tbase++];
poss[1].y = pos_buf[vbase++]; uv_1v = tx_buf[tbase];
if (z_clip && (pos_buf[vbase] 1)) {++ibase; continue;}
tbase = ix_buf[ibase++]
vbase = tbase
poss[2].x = pos_buf[vbase++]; uv_2u = tx_buf[tbase++];
poss[2].y = pos_buf[vbase++]; uv_2v = tx_buf[tbase];
if (z_clip && (pos_buf[vbase] 1)) {continue;}
var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ];
var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ];
var vCd = [ poss[2].x - poss[1].x , poss[2].y - poss[1].y ];
// z component of cross product
if( (((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*culling)
continue;
if (color_polygon) {
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();
continue;
}
var vA = [ uv_1u - uv_0u , uv_1v - uv_0v ];
var vB = [ uv_2u - uv_0u , uv_2v - uv_0v ];
vA[0] *= w;
vA[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();
if (!im) { continue;}
var a = im._11 * vAd[0] + im._12 * vBd[0];
var b = im._21 * vAd[0] + im._22 * vBd[0];
var c = im._11 * vAd[1] + im._12 * vBd[1];
var d = im._21 * vAd[1] + im._22 * vBd[1];
var wu = uv_0u * w;
var hv = uv_0v * h;
var du = wu * a + hv * b;
var dv = wu * c + hv * d;
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 - du, poss[0].y - dv);
// bounds
var bx = [wu, wu+vA[0], wu+vB[0]];
var by = [hv, hv+vA[1], hv+vB[1]];
bx.sort(P3D.num_cmp);
by.sort(P3D.num_cmp);
var bw = bx[2] - bx[0];
var bh = by[2] - by[0];
if ((bx[0]+bw)
if ((by[0]+bh)
if (bx[0] >= 1) {bx[0]--; bw++;}
if (by[0] >= 1) {by[0]--; bh++;}
g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw, bh);
/*
if (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], by[0], bw, bh);
}
*/
g.restore();
}
}
function Vec3(_x, _y, _z)
{
this.x = _x || 0;
this.y = _y || 0;
this.z = _z || 0;
}
Vec3.prototype = {
zero: function() {
this.x = this.y = this.z = 0;
},
sub: function(v) {
this.x -= v.x;
this.y -= v.y;
this.z -= v.z;
return this;
},
add: function(v) {
this.x += v.x;
this.y += v.y;
this.z += v.z;
return this;
},
copyFrom: function(v) {
this.x = v.x;
this.y = v.y;
this.z = v.z;
return this;
},
norm:function() {
return Math.sqrt(this.x*this.x + this.y*this.y + this.z*this.z);
},
normalize: function() {
var nrm = Math.sqrt(this.x*this.x + this.y*this.y + this.z*this.z);
if (nrm != 0)
{
this.x /= nrm;
this.y /= nrm;
this.z /= nrm;
}
return this;
},
smul: function(k) {
this.x *= k;
this.y *= k;
this.z *= k;
return this;
},
dpWith: function(v) {
return this.x*v.x + this.y*v.y + this.z*v.z;
},
cp: function(v, w) {
this.x = (w.y * v.z) - (w.z * v.y);
this.y = (w.z * v.x) - (w.x * v.z);
this.z = (w.x * v.y) - (w.y * v.x);
return this;
},
toString: function() {
return this.x + ", " + this.y + "," + this.z;
}
}
function M44(cpy)
{
if (cpy)
this.copyFrom(cpy);
else {
this.ident();
}
}
M44.prototype = {
ident: function() {
this._12 = this._13 = this._14 = 0;
this._21 = this._23 = this._24 = 0;
this._31 = this._32 = this._34 = 0;
this._41 = this._42 = this._43 = 0;
this._11 = this._22 = this._33 = this._44 = 1;
return this;
},
copyFrom: function(m) {
this._11 = m._11;
this._12 = m._12;
this._13 = m._13;
this._14 = m._14;
this._21 = m._21;
this._22 = m._22;
this._23 = m._23;
this._24 = m._24;
this._31 = m._31;
this._32 = m._32;
this._33 = m._33;
this._34 = m._34;
this._41 = m._41;
this._42 = m._42;
this._43 = m._43;
this._44 = m._44;
return this;
},
transVec3: function(out, x, y, z) {
out[0] = x * this._11 + y * this._21 + z * this._31 + this._41;
out[1] = x * this._12 + y * this._22 + z * this._32 + this._42;
out[2] = x * this._13 + y * this._23 + z * this._33 + this._43;
out[3] = x * this._14 + y * this._24 + z * this._34 + this._44;
},
transVec3Rot: function(out, x, y, z) {
out[0] = x * this._11 + y * this._21 + z * this._31;
out[1] = x * this._12 + y * this._22 + z * this._32;
out[2] = x * this._13 + y * this._23 + z * this._33;
},
perspectiveLH: function(vw, vh, z_near, z_far) {
this._11 = 2.0*z_near/vw;
this._12 = 0;
this._13 = 0;
this._14 = 0;
this._21 = 0;
this._22 = 2*z_near/vh;
this._23 = 0;
this._24 = 0;
this._31 = 0;
this._32 = 0;
this._33 = z_far/(z_far-z_near);
this._34 = 1;
this._41 = 0;
this._42 = 0;
this._43 = z_near*z_far/(z_near-z_far);
this._44 = 0;
return this;
},
lookAtLH: function(aUp, aFrom, aAt) {
var aX = new Vec3();
var aY = new Vec3();
var aZ = new Vec3(aAt.x, aAt.y, aAt.z);
aZ.sub(aFrom).normalize();
aX.cp(aUp, aZ).normalize();
aY.cp(aZ, aX);
this._11 = aX.x; this._12 = aY.x; this._13 = aZ.x; this._14 = 0;
this._21 = aX.y; this._22 = aY.y; this._23 = aZ.y; this._24 = 0;
this._31 = aX.z; this._32 = aY.z; this._33 = aZ.z; this._34 = 0;
this._41 = -aFrom.dpWith(aX);
this._42 = -aFrom.dpWith(aY);
this._43 = -aFrom.dpWith(aZ);
this._44 = 1;
return this;
},
mul: function(A, B) {
this._11 = A._11*B._11 + A._12*B._21 + A._13*B._31 + A._14*B._41;
this._12 = A._11*B._12 + A._12*B._22 + A._13*B._32 + A._14*B._42;
this._13 = A._11*B._13 + A._12*B._23 + A._13*B._33 + A._14*B._43;
this._14 = A._11*B._14 + A._12*B._24 + A._13*B._34 + A._14*B._44;
this._21 = A._21*B._11 + A._22*B._21 + A._23*B._31 + A._24*B._41;
this._22 = A._21*B._12 + A._22*B._22 + A._23*B._32 + A._24*B._42;
this._23 = A._21*B._13 + A._22*B._23 + A._23*B._33 + A._24*B._43;
this._24 = A._21*B._14 + A._22*B._24 + A._23*B._34 + A._24*B._44;
this._31 = A._31*B._11 + A._32*B._21 + A._33*B._31 + A._34*B._41;
this._32 = A._31*B._12 + A._32*B._22 + A._33*B._32 + A._34*B._42;
this._33 = A._31*B._13 + A._32*B._23 + A._33*B._33 + A._34*B._43;
this._34 = A._31*B._14 + A._32*B._24 + A._33*B._34 + A._34*B._44;
this._41 = A._41*B._11 + A._42*B._21 + A._43*B._31 + A._44*B._41;
this._42 = A._41*B._12 + A._42*B._22 + A._43*B._32 + A._44*B._42;
this._43 = A._41*B._13 + A._42*B._23 + A._43*B._33 + A._44*B._43;
this._44 = A._41*B._14 + A._42*B._24 + A._43*B._34 + A._44*B._44;
return this;
},
translate: function(x, y, z) {
this._11 = 1; this._12 = 0; this._13 = 0; this._14 = 0;
this._21 = 0; this._22 = 1; this._23 = 0; this._24 = 0;
this._31 = 0; this._32 = 0; this._33 = 1; this._34 = 0;
this._41 = x; this._42 = y; this._43 = z; this._44 = 1;
return this;
},
transpose33: function() {
var t;
t = this._12;
this._12 = this._21;
this._21 = t;
t = this._13;
this._13 = this._31;
this._31 = t;
t = this._23;
this._23 = this._32;
this._32 = t;
return this;
},
// OpenGL style rotation
glRotate: function(angle, x, y, z) {
var s = Math.sin( angle );
var c = Math.cos( angle );
var xx = x * x;
var yy = y * y;
var zz = z * z;
var xy = x * y;
var yz = y * z;
var zx = z * x;
var xs = x * s;
var ys = y * s;
var zs = z * s;
var one_c = 1.0 - c;
/*
this._11 = (one_c * xx) + c;
this._21 = (one_c * xy) - zs;
this._31 = (one_c * zx) + ys;
this._41 = 0;
this._12 = (one_c * xy) + zs;
this._22 = (one_c * yy) + c;
this._32 = (one_c * yz) - xs;
this._42 = 0;
this._13 = (one_c * zx) - ys;
this._23 = (one_c * yz) + xs;
this._33 = (one_c * zz) + c;
this._43 = 0;

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5：HTML5的关键改进Apr 28, 2025 am 12:26 AM

HTML5带来了五个关键改进：1.语义化标签提升了代码清晰度和SEO效果；2.多媒体支持简化了视频和音频嵌入；3.表单增强简化了验证；4.离线与本地存储提高了用户体验；5.画布与图形功能增强了网页的可视化效果。

HTML5：标准及其对Web开发的影响Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括语义化标签、多媒体支持、离线存储与本地存储、表单增强。1.语义化标签如、等，提升代码可读性和SEO效果。2.和标签简化多媒体嵌入。3.离线存储和本地存储如ApplicationCache和LocalStorage，支持无网络运行和数据存储。4.表单增强引入新输入类型和验证属性，简化处理和验证。

H5代码示例：实际应用和教程Apr 25, 2025 am 12:10 AM

H5提供了多种新特性和功能，极大地增强了前端开发的能力。1.多媒体支持：通过和元素嵌入媒体，无需插件。2.画布（Canvas）：使用元素动态渲染2D图形和动画。3.本地存储：通过localStorage和sessionStorage实现数据持久化存储，提升用户体验。

H5和HTML5之间的连接：相似性和差异Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一个版本，包含新元素和API；H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码，H5应用则需要容器运行并通过JavaScript与原生代码交互。

H5代码的基础：密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等，用于构建现代网页。1.定义头部内容，2.用于导航链接，3.表示独立文章内容，4.组织页面内容，5.展示侧边栏内容，6.定义页脚，这些元素增强了网页的结构和功能性。

HTML5和H5：了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别，H5是HTML5的简称。1.HTML5是HTML的第五个版本，增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用，适用于各种移动设备。

HTML5：现代网络的基础（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本，由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强，提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签，如、、、等，使网页结构更清晰，SEO效果更好。HTML5支持多媒体元素和，无需第三方插件，提升了用户体验和加载速度。HTML5增强了表单功能，引入了新的输入类型如、等，提高了用户体验和表单验证效率。

H5代码：编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码？答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等，提升代码可读性和SEO效果。2.保持代码结构化和可读性，使用适当缩进和注释。3.优化性能，通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误，如标签未闭合，确保代码有效性。

See all articles