js实现蒲公英飞舞动画效果代码
代码语言：html
所属分类：粒子
代码描述：js实现蒲公英飞舞动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.custom-background{
height: 100vh;
width: 100vw;
background-image:url('//repo.bfw.wiki/bfwrepo/image/5e44fafbdc615.png');
background-size:cover;
background-repeat:no-repeat;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body class="custom-background">
<div class="snow-container" style="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;"></div>
<script type="text/javascript">
// snow
var THREE = THREE || {};
if (!self.Int32Array) self.Int32Array = Array, self.Float32Array = Array;
THREE.Color = function(a) {
a !== void 0 && this.setHex(a);
return this
};
THREE.Color.prototype = {
constructor: THREE.Color,
r: 1,
g: 1,
b: 1,
copy: function(a) {
this.r = a.r;
this.g = a.g;
this.b = a.b;
return this
},
copyGammaToLinear: function(a) {
this.r = a.r * a.r;
this.g = a.g * a.g;
this.b = a.b * a.b;
return this
},
copyLinearToGamma: function(a) {
this.r = Math.sqrt(a.r);
this.g = Math.sqrt(a.g);
this.b = Math.sqrt(a.b);
return this
},
setRGB: function(a, b, c) {
this.r = a;
this.g = b;
this.b = c;
return this
},
setHSV: function(a, b, c) {
var d, f, e;
if (c === 0) this.r = this.g = this.b = 0;
else switch (d = Math.floor(a * 6), f = a * 6 - d, a = c * (1 - b), e = c * (1 - b * f), b = c * (1 - b * (1 - f)), d) {
case 1:
this.r = e;
this.g = c;
this.b = a;
break;
case 2:
this.r = a;
this.g = c;
this.b = b;
break;
case 3:
this.r = a;
this.g = e;
this.b = c;
break;
case 4:
this.r = b;
this.g = a;
this.b = c;
break;
case 5:
this.r = c;
this.g = a;
this.b = e;
break;
case 6:
case 0:
this.r = c, this.g = b, this.b = a
}
return this
},
setHex: function(a) {
a = Math.floor(a);
this.r = (a >> 16 & 255) / 255;
this.g = (a >> 8 & 255) / 255;
this.b = (a & 255) / 255;
return this
},
getHex: function() {
return ~~(this.r * 255) << 16 ^ ~~(this.g * 255) << 8 ^ ~~(this.b * 255)
},
getContextStyle: function() {
return "rgb(" + Math.floor(this.r * 255) + "," + Math.floor(this.g * 255) + "," + Math.floor(this.b * 255) + ")"
},
clone: function() {
return (new THREE.Color).setRGB(this.r, this.g, this.b)
}
};
THREE.Vector2 = function(a, b) {
this.x = a || 0;
this.y = b || 0
};
THREE.Vector2.prototype = {
constructor: THREE.Vector2,
set: function(a, b) {
this.x = a;
this.y = b;
return this
},
copy: function(a) {
this.x = a.x;
this.y = a.y;
return this
},
clone: function() {
return new THREE.Vector2(this.x, this.y)
},
add: function(a, b) {
this.x = a.x + b.x;
this.y = a.y + b.y;
return this
},
addSelf: function(a) {
this.x += a.x;
this.y += a.y;
return this
},
sub: function(a, b) {
this.x = a.x - b.x;
this.y = a.y - b.y;
return this
},
subSelf: function(a) {
this.x -= a.x;
this.y -= a.y;
return this
},
multiplyScalar: function(a) {
this.x *= a;
this.y *= a;
return this
},
divideScalar: function(a) {
a ? (this.x /= a, this.y /= a) : this.set(0, 0);
return this
},
negate: function() {
return this.multiplyScalar(-1)
},
dot: function(a) {
return this.x * a.x + this.y * a.y
},
lengthSq: function() {
return this.x * this.x + this.y * this.y
},
length: function() {
return Math.sqrt(this.lengthSq())
},
normalize: function() {
return this.divideScalar(this.length())
},
distanceTo: function(a) {
return Math.sqrt(this.distanceToSquared(a))
},
distanceToSquared: function(a) {
var b = this.x - a.x,
a = this.y - a.y;
return b * b + a * a
},
setLength: function(a) {
return this.normalize().multiplyScalar(a)
},
equals: function(a) {
return a.x === this.x && a.y === this.y
}
};
THREE.Vector3 = function(a, b, c) {
this.x = a || 0;
this.y = b || 0;
this.z = c || 0
};
THREE.Vector3.prototype = {
constructor: THREE.Vector3,
set: function(a, b, c) {
this.x = a;
this.y = b;
this.z = c;
return this
},
setX: function(a) {
this.x = a;
return this
},
setY: function(a) {
this.y = a;
return this
},
setZ: function(a) {
this.z = a;
return this
},
copy: function(a) {
this.x = a.x;
this.y = a.y;
this.z = a.z;
return this
},
clone: function() {
return new THREE.Vector3(this.x, this.y, this.z)
},
add: function(a, b) {
this.x = a.x + b.x;
this.y = a.y + b.y;
this.z = a.z + b.z;
return this
},
addSelf: function(a) {
this.x += a.x;
this.y += a.y;
this.z += a.z;
return this
},
addScalar: function(a) {
this.x += a;
this.y += a;
this.z += a;
return this
},
sub: function(a, b) {
this.x = a.x - b.x;
this.y = a.y - b.y;
this.z = a.z - b.z;
return this
},
subSelf: function(a) {
this.x -= a.x;
this.y -= a.y;
this.z -= a.z;
return this
},
multiply: function(a, b) {
this.x = a.x * b.x;
this.y = a.y * b.y;
this.z = a.z * b.z;
return this
},
multiplySelf: function(a) {
this.x *= a.x;
this.y *= a.y;
this.z *= a.z;
return this
},
multiplyScalar: function(a) {
this.x *= a;
this.y *= a;
this.z *= a;
return this
},
divideSelf: function(a) {
this.x /= a.x;
this.y /= a.y;
this.z /= a.z;
return this
},
divideScalar: function(a) {
a ? (this.x /= a, this.y /= a, this.z /= a) : this.z = this.y = this.x = 0;
return this
},
negate: function() {
return this.multiplyScalar(-1)
},
dot: function(a) {
return this.x * a.x + this.y * a.y + this.z * a.z
},
lengthSq: function() {
return this.x * this.x + this.y * this.y + this.z * this.z
},
length: function() {
return Math.sqrt(this.lengthSq())
},
lengthManhattan: function() {
return this.x + this.y + this.z
},
normalize: function() {
return this.divideScalar(this.length())
},
setLength: function(a) {
return this.normalize().multiplyScalar(a)
},
cross: function(a, b) {
this.x = a.y * b.z - a.z * b.y;
this.y = a.z * b.x - a.x * b.z;
this.z = a.x * b.y - a.y * b.x;
return this
},
crossSelf: function(a) {
var b = this.x,
c = this.y,
d = this.z;
this.x = c * a.z - d * a.y;
this.y = d * a.x - b * a.z;
this.z = b * a.y - c * a.x;
return this
},
distanceTo: function(a) {
return Math.sqrt(this.distanceToSquared(a))
},
distanceToSquared: function(a) {
return (new THREE.Vector3).sub(this, a).lengthSq()
},
setPositionFromMatrix: function(a) {
this.x = a.n14;
this.y = a.n24;
this.z = a.n34
},
setRotationFromMatrix: function(a) {
var b = Math.cos(this.y);
this.y = Math.asin(a.n13);
Math.abs(b) > 1.0E-5 ? (this.x = Math.atan2(-a.n23 / b, a.n33 / b), this.z = Math.atan2(-a.n12 / b, a.n11 / b)) : (this.x = 0, this.z = Math.atan2(a.n21, a.n22))
},
isZero: function() {
return this.lengthSq() < 1.0E-4
}
};
THREE.Vector4 = function(a, b, c, d) {
this.x = a || 0;
this.y = b || 0;
this.z = c || 0;
this.w = d !== void 0 ? d : 1
};
THREE.Vector4.prototype = {
constructor: THREE.Vector4,
set: function(a, b, c, d) {
this.x = a;
this.y = b;
this.z = c;
this.w = d;
return this
},
copy: function(a) {
this.x = a.x;
this.y = a.y;
this.z = a.z;
this.w = a.w !== void 0 ? a.w : 1
},
clone: function() {
return new THREE.Vector4(this.x, this.y, this.z, this.w)
},
add: function(a, b) {
this.x = a.x + b.x;
this.y = a.y + b.y;
this.z = a.z + b.z;
this.w = a.w + b.w;
return this
},
addSelf: function(a) {
this.x += a.x;
this.y += a.y;
this.z += a.z;
this.w += a.w;
return this
},
sub: function(a, b) {
this.x = a.x - b.x;
this.y = a.y - b.y;
this.z = a.z - b.z;
this.w = a.w - b.w;
return this
},
subSelf: function(a) {
this.x -= a.x;
this.y -= a.y;
this.z -= a.z;
this.w -= a.w;
return this
},
multiplyScalar: function(a) {
this.x *= a;
this.y *= a;
this.z *= a;
this.w *= a;
return this
},
divideScalar: function(a) {
a ? (this.x /= a, this.y /= a, this.z /= a, this.w /= a) : (this.z = this.y = this.x = 0, this.w = 1);
return this
},
negate: function() {
return this.multiplyScalar(-1)
},
dot: function(a) {
return this.x * a.x + this.y * a.y + this.z * a.z + this.w * a.w
},
lengthSq: function() {
return this.dot(this)
},
length: function() {
return Math.sqrt(this.lengthSq())
},
normalize: function() {
return this.divideScalar(this.length())
},
setLength: function(a) {
return this.normalize().multiplyScalar(a)
},
lerpSelf: function(a, b) {
this.x += (a.x - this.x) * b;
this.y += (a.y - this.y) * b;
this.z += (a.z - this.z) * b;
this.w += (a.w - this.w) * b;
return this
}
};
THREE.Ray = function(a, b) {
function c(a, b, c) {
i.sub(c, a);
p = i.dot(b);
if (p <= 0) return null;
k = n.add(a, o.copy(b).multiplyScalar(p));
return s = c.distanceTo(k)
}
function d(a, b, c, d) {
i.sub(d, b);
n.sub(c, b);
o.sub(a, b);
K = i.dot(i);
C = i.dot(n);
Q = i.dot(o);
O = n.dot(n);
w = n.dot(o);
F = 1 / (K * O - C * C);
z = (O * Q - C * w) * F;
D = (K * w - C * Q) * F;
return z >= 0 && D >= 0 && z + D < 1
}
this.origin = a || new THREE.Vector3;
this.direction = b || new THREE.Vector3;
this.intersectScene = function(a) {
return this.intersectObjects(a.children)
};
this.intersectObjects = function(a) {
var b, c, d = [];
b = 0;
for (c = a.length; b < c; b++) Array.prototype.push.apply(d, this.intersectObject(a[b]));
d.sort(function(a, b) {
return a.distance - b.distance
});
return d
};
var f = new THREE.Vector3,
e = new THREE.Vector3,
g = new THREE.Vector3,
h = new THREE.Vector3,
a = new THREE.Vector3,
b = new THREE.Vector3,
m = new THREE.Vector3,
l = new THREE.Vector3,
j = new THREE.Vector3;
this.intersectObject = function(k) {
for (var i, o = [], n = 0, W = k.children.length; n < W; n++) Array.prototype.push.apply(o, this.intersectObject(k.children[n]));
if (k instanceof THREE.Particle) {
n = c(this.origin, this.direction, k.matrixWorld.getPosition());
if (n === null || n > k.scale.x) return [];
i = {
distance: n,
point: k.position,
face: null,
object: k
};
o.push(i)
} else if (k instanceof THREE.Mesh) {
n = c(this.origin, this.direction, k.matrixWorld.getPosition());
if (n === null || n > k.geometry.boundingSphere.radius * Math.max(k.scale.x, Math.max(k.scale.y, k.scale.z))) return o;
var p, G = k.geometry,
H = G.vertices,
I;
k.matrixRotationWorld.extractRotation(k.matrixWorld);
n = 0;
for (W = G.faces.length; n < W; n++)
if (i = G.faces[n], a.copy(this.origin), b.copy(this.direction), I = k.matrixWorld, m = I.multiplyVector3(m.copy(i.centroid)).subSelf(a), p = m.dot(b), !(p <= 0) && (f = I.multiplyVector3(f.copy(H[i.a].position)), e = I.multiplyVector3(e.copy(H[i.b].position)), g = I.multiplyVector3(g.copy(H[i.c].position)), i instanceof THREE.Face4 && (h = I.multiplyVector3(h.copy(H[i.d].position))), l = k.matrixRotationWorld.multiplyVector3(l.copy(i.normal)), p = b.dot(l), k.doubleSided || (k.flipSided ? p > 0 : p < 0)))
if (p = l.dot(m.sub(f, a)) / p, j.add(a, b.multiplyScalar(p)), i instanceof THREE.Face3) d(j, f, e, g) && (i = {
distance: a.distanceTo(j),
point: j.clone(),
face: i,
object: k
}, o.push(i));
else if (i instanceof THREE.Face4 && (d(j, f, e, h) || d(j, e, g, h))) i = {
distance: a.distanceTo(j),
point: j.clone(),
face: i,
object: k
}, o.push(i)
}
return o
};
var i = new THREE.Vector3,
n = new THREE.Vector3,
o = new THREE.Vector3,
p, k, s, K, C, Q, O, w, F, z, D
};
THREE.Rectangle = function() {
function a() {
e = d - b;
g = f - c
}
var b, c, d, f, e, g, h = !0;
this.getX = function() {
return b
};
this.getY = function() {
return c
};
this.getWidth = function() {
return e
};
this.getHeight = function() {
return g
};
this.getLeft = function() {
return b
};
this.getTop = function() {
return c
};
this.getRight = function() {
return d
};
this.getBottom = function() {
return f
};
this.set = function(e, g, j, i) {
h = !1;
b = e;
c = g;
d = j;
f = i;
a()
};
this.addPoint = function(e, g) {
h ? (h = !1, b = e, c = g, d = e, f = g) : (b = b < e ? b : e, c = c < g ? c : g, d = d > e ? d : e, f = f > g ? f : g);
a()
};
this.add3Points = function(e, g, j, i, n, o) {
h ? (h = !1, b = e < j ? e < n ? e : n : j < n ? j : n, c = g < i ? g < o ? g : o : i < o ? i : o, d = e > j ? e > n ? e : n : j > n ? j : n, f = g > i ? g > o ? g : o : i > o ? i : o) : (b = e < j ? e < n ? e < b ? e : b : n < b ? n : b : j < n ? j < b ? j : b : n < b ? n : b, c = g < i ? g < o ? g < c ? g : c : o < c ? o : c : i < o ? i < c ? i : c : o < c ? o : c, d = e > j ? e > n ? e > d ? e : d : n > d ? n : d : j > n ? j > d ? j : d : n > d ? n : d, f = g > i ? g > o ? g > f ? g : f : o > f ? o : f : i > o ? i > f ? i : f : o > f ? o : f);
a()
};
this.addRectangle = function(e) {
h ? (h = !1, b = e.getLeft(), c = e.getTop(), d = e.getRight(), f = e.getBottom()) : (b = b < e.getLeft() ? b : e.getLeft(), c = c < e.getTop() ? c : e.getTop(), d = d > e.getRight() ? d : e.getRight(), f = f > e.getBottom() ? f : e.getBottom());
a()
};
this.inflate = function(e) {
b -= e;
c -= e;
d += e;
f += e;
a()
};
this.minSelf = function(e) {
b = b > e.getLeft() ? b : e.getLeft();
c = c > e.getTop() ? c : e.getTop();
d = d < e.getRight() ? d : e.getRight();
f = f < e.getBottom() ? f : e.getBottom();
a()
};
this.intersects = function(a) {
return Math.min(d, a.getRight()) - Math.max(b, a.getLeft()) >= 0 && Math.min(f, a.getBottom()) - Math.max(c, a.getTop()) >= 0
};
this.empty = function() {
h = !0;
f = d = c = b = 0;
a()
};
this.isEmpty = function() {
return h
}
};
THREE.Math = {
clamp: function(a, b, c) {
return a < b ? b : a > c ? c : a
},
clampBottom: function(a, b) {
return a < b ? b : a
},
mapLinear: function(a, b, c, d, f) {
return d + (a - b) * (f - d) / (c - b)
},
random16: function() {
return (65280 * Math.random() + 255 * Math.random()) / 65535
}
};
THREE.Matrix3 = function() {
this.m = []
};
THREE.Matrix3.prototype = {
constructor: THREE.Matrix3,
transpose: function() {
var a, b = this.m;
a = b[1];
b[1] = b[3];
b[3] = a;
a = b[2];
b[2] = b[6];
b[6] = a;
a = b[5];
b[5] = b[7];
b[7] = a;
return this
},
transposeIntoArray: function(a) {
var b = this.m.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0