HTML53D衣服摇摆动画特效分享!
作者:小小蜘蛛侠 | 来源:互联网 | 2023-01-21 10:23
这又是一款基于HTML5Canvas的3D动画杰作,它是一个可以随风飘动的3D衣服摇摆动画特效,非常逼真。当我们将鼠标滑过衣服时,衣服将会出现摇摆的动画,点击鼠标时,衣服将会更加剧
这又是一款基于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) <= (w-1)) bw++;
- if ((by[0]+bh) <= (h-1)) 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 < len;++i)
- {
- vbase = ix_buf[ibase++] << 2;
- poss[0].x = pos_buf[vbase++];
- poss[0].y = pos_buf[vbase ];
-
- vbase = ix_buf[ibase++] << 2;
- poss[1].x = pos_buf[vbase++];
- poss[1].y = pos_buf[vbase ];
-
- vbase = ix_buf[ibase++] << 2;
- poss[2].x = pos_buf[vbase++];
- poss[2].y = pos_buf[vbase ];
-
- // z component of cross product < 0 ?
-
- 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) < 0);
-
- 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 < len;++i)
- {
- tbase = ix_buf[ibase++] << 1
- vbase = tbase << 1;
- 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] < 0 || pos_buf[vbase] > 1)) {ibase += 2; continue;}
-
- tbase = ix_buf[ibase++] << 1
- vbase = tbase << 1;
- 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] < 0 || pos_buf[vbase] > 1)) {++ibase; continue;}
-
- tbase = ix_buf[ibase++] << 1
- vbase = tbase << 1;
- 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] < 0 || 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 < 0 ?
- if( (((vAd[0] * vCd[1]) – (vAd[1] * vCd[0]))*culling) < 0)
- 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) <= (w-1)) bw++;
- if ((by[0]+bh) <= (h-1)) 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;
-
- this._14 = 0;
- this._24 = 0;
- this._34 = 0;
- this._44 = 1;
- */
-
- this._11 = (one_c * xx) + c;
- this._12 = (one_c * xy) – zs;
- this._13 = (one_c * zx) + ys;
- this._14 = 0;
-
- this._21 = (one_c * xy) + zs;
- this._22 = (one_c * yy) + c;
- this._23 = (one_c * yz) – xs;
- this._24 = 0;
-
- this._31 = (one_c * zx) – ys;
- this._32 = (one_c * yz) + xs;
- this._33 = (one_c * zz) + c;
- this._34 = 0;
-
- this._41 = 0;
- this._42 = 0;
- this._43 = 0;
- this._44 = 1;
-
- return this;
- }
-
- }
-
- // matrix 2×2
- function M22()
- {
- this._11 = 1;
- this._12 = 0;
- this._21 = 0;
- this._22 = 1;
- }
-
- M22.prototype.getInvert = function()
- {
- var out = new M22();
- var det = this._11 * this._22 – this._12 * this._21;
- if (det > -0.0001 && det < 0.0001)
- return null;
-
- out._11 = this._22 / det;
- out._22 = this._11 / det;
-
- out._12 = –this._12 / det;
- out._21 = –this._21 / det;
-
- return out;
- }
推荐阅读
-
JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ...
[详细]
蜡笔小新 2023-12-11 11:40:52
-
本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ...
[详细]
蜡笔小新 2023-12-10 15:14:25
-
-
本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ...
[详细]
蜡笔小新 2023-12-09 17:31:06
-
本文介绍了PHP中的单例模式与静态变量的区别及使用方法。在PHP中,静态变量的存活周期仅仅是每次PHP的会话周期,与Java、C++不同。静态变量在PHP中的作用域仅限于当前文件内,在函数或类中可以传递变量。本文还通过示例代码解释了静态变量在函数和类中的使用方法,并说明了静态变量的生命周期与结构体的生命周期相关联。同时,本文还介绍了静态变量在类中的使用方法,并通过示例代码展示了如何在类中使用静态变量。 ...
[详细]
蜡笔小新 2023-12-13 18:03:36
-
本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ...
[详细]
蜡笔小新 2023-12-11 13:04:00
-
本文介绍了pack布局管理器在Perl/Tk中的使用方法及注意事项。通过调用pack()方法,可以控制部件在显示窗口中的位置和大小。同时,本文还提到了在使用pack布局管理器时,应注意将部件分组以便在水平和垂直方向上进行堆放。此外,还介绍了使用Frame部件或Toplevel部件来组织部件在窗口内的方法。最后,本文强调了在使用pack布局管理器时,应避免在中间切换到grid布局管理器,以免造成混乱。 ...
[详细]
蜡笔小新 2023-12-10 16:03:24
-
本文介绍了OpenMap教程4中关于地图图层的内容,包括将ShapeLayer添加到MapBean中的方法,OpenMap支持的图层类型以及使用BufferedLayer创建图像的MapBean。此外,还介绍了Layer背景标志的作用和OMGraphicHandlerLayer的基础层类。 ...
[详细]
蜡笔小新 2023-12-09 19:26:56
-
本文介绍了使用freemaker这个jar包生成Java代码的步骤,通过提前编辑好的模板,可以避免写重复代码。首先需要在springboot的pom.xml文件中加入freemaker的依赖包。然后编写模板,定义要生成的Java类的属性和方法。最后编写生成代码的类,通过加载模板文件和数据模型,生成Java代码文件。本文提供了示例代码,并展示了文件目录结构。 ...
[详细]
蜡笔小新 2023-12-09 09:42:44
-
本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ...
[详细]
蜡笔小新 2023-12-14 15:25:15
-
目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ...
[详细]
蜡笔小新 2023-12-14 15:03:14
-
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
-
本文介绍了利用Visual Basic开发SAP接口程序的方法与原理,以及SAP R/3系统的特点和二次开发平台ABAP的使用。通过程序接口自动读取SAP R/3的数据表或视图,在外部进行处理和利用水晶报表等工具生成符合中国人习惯的报表样式。具体介绍了RFC调用的原理和模型,并强调本文主要不讨论SAP R/3函数的开发,而是针对使用SAP的公司的非ABAP开发人员提供了初步的接口程序开发指导。 ...
[详细]
蜡笔小新 2023-12-13 10:56:31
-
闭包一直是Java社区中争论不断的话题,很多语言都支持闭包这个语言特性,闭包定义了一个依赖于外部环境的自由变量的函数,这个函数能够访问外部环境的变量。本文以JavaScript的一个闭包为例,介绍了闭包的定义和特性。 ...
[详细]
蜡笔小新 2023-12-13 10:46:54
-
本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ...
[详细]
蜡笔小新 2023-12-13 06:02:20
-
本文介绍了一个从入门到高手的VB.NET源代码,通过学习这些源代码,可以在21天内成为VB.NET高手。文章提供了下载地址,并提醒读者加入作者的QQ群和收藏作者的博客。 ...
[详细]
蜡笔小新 2023-12-10 18:37:37
-