Cav 데모에 대한 h5QQ 로그인 예시에 대한 자세한 설명

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", 함수 () { var t = { 너비: 1.5, 높이: 1.5, 깊이 : 10, 세그먼트: 12, 슬라이스: 6, xRange: 0.8, yRange: 0.1, zRange: 1, 주변: "#525252", 확산: " #FFFFFF", 속도: 0.0002 } ; var G = { 개수: 2, xyScalar: 1, z오프셋: 100, 주변: "#002c4a", 확산: "#005584", 속도: 0.001 , 중력: 1200, 감쇠: 0.95, minLimit: 10, maxLimit: null, 최소 거리: 🜜 maxDistance: 400, 자동 조종 장치: false, 그리기: false, 경계: CAV.Vector3.create( ), 단계: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1)) }; var m = "캔버스"; var E = "svg"; var x = { 렌더러: m }; var i, n = Date.now (); var L = CAV.Vector3.create(); var k = CAV.Vector3.create( ); var z = document.getElementById("container"); var w = document.getElementById("anitOut"); var D, I, h, , y; var g; var r;

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

함수 F() { g = new CAV.CanvasRenderer(); H(x.renderer) }

기능 H(N) { if (D) { w.removeChild(D.element) } 스위치(N) { 케이스 m: D = g; 브레이크 } D.setSize(z.offsetWidth, z.offsetHeight); w.appendChild(D.element) }

함수 p() { I = 새로운 CAV. Scene() }

함수 s() { I.remove(h); D.clear(); q = new CAV.Plane(t.width * D.width, t.height * D.height , t.segments, t.slices); y = 새 CAV.Material(t.ambient, t.diffuse); h = 새 CAV.Mesh(q, y) I.add(h); var N, O; for (N = q.vertices.length - 1; N >= 0; N--) { O = q.vertices[N]; O.anchor = CAV.Vector3.clone(O .position); O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1)); O.time = 수학. RandomInRange(0, Math.PIM2) } }

함수 B() { var O, N; for (O = I.lights.length - 1; O >= 0; O--) { N = I.lights[O]; I.remove(N) } D.clear(); for (O = 0; O N = 새로운 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. 속도 = CAV.Vector3.create(); N.acceleration = CAV.Vector3.create(); N.force = CAV.Vector3.create() } }

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

기능 o() { i = Date.now() - n ;????

함수 u() { var Q, P, O, R, T, V, U, S = t.깊이 / 2; CAV.Vector3.copy(G.bounds, L); CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar); CAV.Vector3.setZ(k, G.zOffset); for (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.maxDistance); var W = G.중력 * 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. MultipliScalar(T.velocity, G.dampening); CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit); CAV.Vector3.add(T.veloc, ity) } 에 대해 (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.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.Vector3.add(U.position, U.anchor) } q.dirty = true }

기능 M() { D.render(I) }

함수 J(O) { var Q, N, S = O; var P = 함수(T) { for (Q = 0, l = I.lights.length; Q N = N.ambient.set(T); N.ambientHex = N. ambient.format() } }; var R = 함수(T) { for (Q = 0, l = I.lights.length; Q N = I.lights[Q ]; N.diffuse.set(T); N.diffuseHex = N.diffuse.format() > P(S[0]); R (S[1]) } } }

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

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

함수 j(N) { K(z.offsetWidth, z.offsetHeight); M() + ); } });

Cav 데모에 대한 h5QQ 로그인 예시에 대한 자세한 설명

관련 기사