Explication détaillée de l'exemple de connexion h5QQ à la démo cav

html5背景 *{margin:0;padding:0;list-style-type:none;} a,img{border:0;}

$(function () { if (!window.ActiveXObject && !!document.createElement("canvas" ).getContext) { $.getScript("http://im-img.qq.com/pcqq/js/200/cav.js?_=1428576021379", function () { var t = { largeur : 1,5, hauteur : 1,5, profondeur : 10, segments : 12, tranches : 6, xRange : 0,8, yPlage : 0.1, zPlage : 1, ambiante : "#525252", diffusée : "#FFFFFF", vitesse : 0,0002 }; var G = { compte : 2, xyScalaire : 1, zOffset : ambiance : "#002c4a", diffusion : "#005584", vitesse : 0,001, gravité : 1200, amortissement : 0,95, minLimit : 10, maxLimit: 10, minDistance : 20, maxDistance : 400, pilote automatique : faux, dessiner : faux, limites : CAV.Vector3.create(), étape : CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1)) }; var m = "canvas"; var E = "svg"; var x = { rendu m }; var i, n = Date.now(); var L = CAV. Vector3.create(); var k = CAV.Vector3.create(); var z = document.getElementById("container"); var w = document.get ElementById("anitOut"); var D, I, h, q, y; var g; var r;

function C() { F(); p() ; s(); B(); v(); K(z.offsetWidth, z.offsetHeight); o() }

function s() { I.remove(h); D .clear(); q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices); y = new CAV.Material( t.ambient, t.diffuse); h = new CAV.Mesh(q, y); I.add(h); var N, ; pour (N = q temps = Math.randomInRange( 0, Math.PIM2) ante var O, N; pour (O = I.lights.length - 1; O>= 0 ; O--) { N = I.lights[O]; I.remove(N) } D.clear(); pour (O = 0 ; O N = nouveau CAV.Light(G. ambient, G.diffuse); N.ambientHex = N.ambient.format(); N.diffuseHex = N.diffuse.format(); I.add(N); N.mass = Math.randomInRange(0.5, 1); N.velocity = CAV.Vector3.create(); N.acceleration = CAV.Vector3.create(); N.force = CAV.Vector3.create() } }

fonction K(O, N) { D.setSize(O, N); CAV.Vector3.set( L, D.halfWidth, D.halfHeight); s() }

function o() { i = Date.now() - n; u( ); M(); requestAnimationFrame(o) }

fonction u() { var Q, P, O, R, T, V, U, S = t.profondeur / 2; CAV.Vector3.copy(G.bounds, L); CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar); CAV.Vector3.setZ(k, G.zOffset); pour (R = I.lights.length - 1; R >= 0; R--) { T = I.lights[R] ; CAV.Vector3.setZ(T.position, G.zOffset); var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.max Distance) ; var W = G.gravity * T.mass / N; CAV.Vector3.subtractVectors(T.force, k, T.position); CAV.Vector3.normalise(T.force) ; CAV.Vector3.multiplyScalar(T.force, W); CAV.Vector3.set(T.acceleration); CAV.Vector3.add(T.acceleration, T.force); CAV.Vector3.add (T.velocity, T.acceleration); CAV.Vector3.multiplyScalar (T.velocity, G.dampening); CAV.Vector3.limit(T.velocity, G. minLimit, G.maxLimit); CAV.Vector3.add(T.position, T.velocity) } pour (V = q.vertices.length - 1; V>= 0; V--) { U = q.vertices[V]; Q = Math.sin(U.time + U.step[0] * i * t.speed); P = Mathématiques .cos(U.time + U.step[1] * i * t.speed); O = Math.sin(U.time + U.step[2] * i * t.speed); CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S); CAV.Vector 3.ajouter (U.position, U.ancre) } q.dirty = true }

function M() { D.render(I) }

fonction J(O) { var Q , N, S = O; var P = fonction (T) { pour (Q = 0, l = I.lights.length; Q ) N = I. lumières[Q]; N.ambient.set(T); N.ambient.format() } }; var R = fonction (T) { pour (Q = 0, l = I.lights.length ; Q N = I.lights[Q]; N.diffuse.set(T);

return { set: function () { P(S[0]); R(S[1]) ante }

fonction v() { window.addEventListener("resize", j) }

function A(N) { CAV.Vector3.set(k, N.x, D .height - N.y); CAV .Vector3.subtract(k, L) }

fonction j(N) { K(z.offsetWidth, z.offsetHeight); M() }

C(); }) } else { alert('调用cav.js失败'); } });