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() {
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0