Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to use HTML5 to achieve 3D clothing rocking animation special effects, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

This is another HTML5 Canvas-based 3D animation masterpiece, it is a 3D clothing rocking animation effects that can float with the wind, very realistic. When we slide the mouse over the clothes, the clothes will appear rocking animation, when the mouse is clicked, the clothes will swing more violently.

HTML code

XML/HTML Code copies content to the clipboard

"3D on 2D Canvas" demo

Move cursor to pan / click to swing

P3D library JS code, mainly used to deal with 3D effects of JavaScript Code copy content to the clipboard 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 (areline b) {return arelyb } 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. Return false; var a 11 = vA [0]; m. Stories 12 = vA [1]; m. Stories 21 = vB [0]; m. Stories 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) = 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 +] 0) t.shade = 0.8 else {t.shade = 0.1-N.y * 0.6; if (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) } function ClothNode () {this.flags = 0; this.pos = new Vec3 (); this.velo = new Vec3 (); this.cv = new Vec3 (); this.F = new Vec3 (); this.links = [null, null]; this.uv = {uvvana 0};} function RenderTriangle () {this.texture = null This.poss = new Array (3); this.tposs = [new Vec3 (), new Vec3 (), new Vec3 ()]; this.uvs = [{ulv 0, v 0}, {u v v 0, v 0}, {u v v 0, v 0}]; this.shade = 0; this.lighting = true; this.zBias = 0; this.sortKey = 0 } after reading the above, do you have any further understanding of how to use HTML5 to achieve 3D clothing rocking animation special effects? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.