目录 演示 技术栈 源码 css js 雪花部分 演示 技术栈 display:inline-block，block，inline元素的区别: display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一
目录
- 演示
- 技术栈
- 源码
- css
- js
- 雪花部分
演示
技术栈
display:inline-block，block，inline元素的区别:
display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。
display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。
display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align:top;来使元素顶部对齐。
行内标签：不能设置宽度 高度 padding margin，标签不能自动伸展。可以通过display灵活的将标签在行内和行间随意转换；display：inline;转换成行内标签display：block;转换成块级标签。
opacity 属性设置或返回元素的不透明度。
元素的不透明度级别描述了透明度级别，当不透明度为 1 时表示完全不透明，当不透明度为 0.5 时表示半透明，当不透明度为 0 时表示完全透明。
源码
css
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
display: block;
position: absolute;
z-index: -2;
}
.snowback{
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
z-index: 1;
}
.ziti{
height: 50px;
width: 100%;
font-size: 60px;
text-align: center;
position: absolute;
margin-top: 100px;
z-index: 11;
}
.ziti span {
height: 30px;
width: 100%;
font-size: 25px;
font-family: "微软雅黑";
text-align: center;
line-height: 30px;
/*关键代ç */
background-image: -webkit-linear-gradient(left, rgb(20, 26, 150), #E6D205 25%, rgb(196, 30, 30) 50%, rgb(41, 197, 111) 75%, rgb(175, 23, 221));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
animation: masked-animation 4s infinite linear;
}
/*关键代ç */
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
.main{
width: 200px;
height: 200px;
top:calc(calc(50% - 100px));
margin-left: calc(50% - 100px);
position: absolute;
}
.box {
width: 200px;
height: 200px;
opacity: 1;
position: absolute;
transform: scale(0.8);
}
.box-biger:hover+.box{
transform: scale(0.8);
}
.box-biger{
width: 200px;
height: 200px;
opacity: 0;
transition: all 1s;
position: absolute;
z-index: 10;
}
.box-biger:hover{
width: 600px;
height: 600px;
opacity: 1;
margin-top: calc(50% - 300px);
margin-left: calc(50% - 300px);
}
.box ul {
width: 100%;
height: 100%;
transform-style: preserve-3d;
background-color: transparent;
list-style: none;
position: absolute;
transition: all 1s;
transform-origin: 50% 50% 0;
}
.box-biger ul{
width: 100%;
height: 100%;
transform-style: preserve-3d;
background-color: transparent;
list-style: none;
position: absolute;
transition: all 1s;
}
.small {
font-size: 60px;
text-align: center;
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
}
.biger {
font-size: 60px;
text-align: center;
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
}
.small img{
height: 100%;
width: 100%;
opacity: 1;
}
.biger img{
height: 70%;
width: 70%;
margin-top: 15%;
margin-left: 15%;
opacity: 0.3;
}
.idv1 {
background-size: cover;
left: 0;
top: 100%;
transform: translateZ(-100px) rotateY(180deg) rotate(180deg);
transform-origin: top;
}
.idv2 {
background-size: cover;
top: 0;
margin-left: 50%;
transform: rotateY(90deg);
}
.idv3 {
background-size: cover;
left: 0;
top: 0;
margin-left: -50%;
transform: rotateY(90deg);
}
.idv4 {
transform: rotateX(90deg);
top: -50%;
}
.idv5 {
transform: rotateX(270deg);
top: 50%;
}
.idv6 {
background-size: cover;
left: 0;
top: 0;
transform: translateZ(100px);
}
.idv7 {
background-size: cover;
left: 0;
top: 100%;
transform: translateZ(-100px) rotateY(180deg) rotate(180deg);
transform-origin: top;
transition: all 1s;
}
.idv12 {
background-size: cover;
left: 0;
top: 0;
transform: translateZ(100px);
transition: all 1s;
}
.box-biger:hover>ul>.idv7{
transform: translateZ(-300px) rotateY(180deg) rotate(180deg);
}
.box-biger:hover>ul>.idv12{
transform: translateZ(300px);
}
.btn {
height: 60px;
text-align: center;
line-height: 60px;
width: 90px;
margin-left: 20px;
float: left;
box-sizing: border-box;
position: absolute;
border-radius: 30px;
z-index: 30;
}
js
// Customize these...
var n = 300,
speed = 5,//速度定义
startSize = rand(100,300);//大小定义
// ...not these
var c = document.getElementById("c"),
ctx = c.getContext("2d"),
cw = (c.width = window.innerWidth),
ch = (c.height = window.innerHeight),
mousePos = {x:"", y:""},
img = new Image(),
particles = [],
particleNumber = 0,
Particle = function(index) {
this.index = index;
this.dur = (100-rand(9, 90))/speed;
this.draw = function() {
ctx.translate( this.x, this.y );
ctx.globalAlpha = this.alpha;
ctx.globalCompositeOperation = 'lighter';
// if (index%1.5==0) ctx.globalCompositeOperation = 'overlay';
if (index%2==0) ctx.globalCompositeOperation = 'xor';
ctx.drawImage(img, -this.size/2, -this.size/2, this.size, this.size);
ctx.translate( -this.x, -this.y );
}
};
function setParticle(p, firstRun) {
var _x = cw*rand(0,1), _y = ch*rand(0,1), _s = startSize;
if (rand(0,1)>0.3 && mousePos.x!=""){ //console.log(mousePos)
_x = mousePos.x;
_y = mousePos.y;
_s = _s/10;
}
var _tl = new TimelineMax()
.fromTo(p, p.dur, {
x:_x,
y:_y,
size:_s,
alpha:0
},{
size:'+='+String(rand(200,400)),
bezier:[{alpha:rand(0.15,0.65)},{alpha:0}],
ease:Power1.easeOut,//ease:Power0.easeNone,
onComplete:function(){ setParticle(p); }
});
if (firstRun) _tl.seek(p.dur*rand()); //fast-forward on first run
}
TweenMax.ticker.addEventListener("tick", function(){
ctx.clearRect(0, 0, cw, ch);
for (var i=0; i<n; i++) particles[i].draw();
});
window.addEventListener('resize', doResize)
function doResize() {
particleNumber = 0;
cw = (c.width = window.innerWidth);
ch = (c.height = window.innerHeight);
for (var i=0; i<n; i++) {
TweenMax.killTweensOf(particles[i]);
setParticle(particles[i], true);
}
TweenMax.fromTo(c, 0.3, {alpha:0},{alpha:1, ease:Power3.easeInOut});
}
// First run
for (var i=0; i<n; i++) particles.push(new Particle(i));
doResize();
function rand(min, max) {
(min) ? min=min : min=0;
(max) ? max=max : max=1;
return min + (max-min)*Math.random();
}
雪花部分
//使用时去掉if语句即可
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
},
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)
},
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)
},
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
},
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)
}
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;
a[0] = b[0];
a[1] = b[3];
a[2] = b[6];
a[3] = b[1];
a[4] = b[4];
a[5] = b[7];
a[6] = b[2];
a[7] = b[5];
a[8] = b[8];
return this
}
};
THREE.Matrix4 = function(a, b, c, d, f, e, g, h, m, l, j, i, n, o, p, k) {
this.set(a !== void 0 ? a : 1, b || 0, c || 0, d || 0, f || 0, e !== void 0 ? e : 1, g || 0, h || 0, m || 0, l || 0, j !== void 0 ? j : 1, i || 0, n || 0, o || 0, p || 0, k !== void 0 ? k : 1);
this.flat = Array(16);
this.m33 = new THREE.Matrix3
};
THREE.Matrix4.prototype = {
constructor: THREE.Matrix4,
set: function(a, b, c, d, f, e, g, h, m, l, j, i, n, o, p, k) {
this.n11 = a;
this.n12 = b;
this.n13 = c;
this.n14 = d;
this.n21 = f;
this.n22 = e;
this.n23 = g;
this.n24 = h;
this.n31 = m;
this.n32 = l;
this.n33 = j;
this.n34 = i;
this.n41 = n;
this.n42 = o;
this.n43 = p;
this.n44 = k;
return this
},
identity: function() {
this.set(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
return this
},
copy: function(a) {
this.set(a.n11, a.n12, a.n13, a.n14, a.n21, a.n22, a.n23, a.n24, a.n31, a.n32, a.n33, a.n34, a.n41, a.n42, a.n43, a.n44);
return this
},
lookAt: function(a, b, c) {
var d = THREE.Matrix4.__v1,
f = THREE.Matrix4.__v2,
e = THREE.Matrix4.__v3;
e.sub(a, b).normalize();
if (e.length() === 0) e.z = 1;
d.cross(c, e).normalize();
d.length() === 0 && (e.x += 1.0E-4, d.cross(c, e).normalize());
f.cross(e, d).normalize();
this.n11 = d.x;
this.n12 = f.x;
this.n13 = e.x;
this.n21 = d.y;
this.n22 = f.y;
this.n23 = e.y;
this.n31 = d.z;
this.n32 = f.z;
this.n33 = e.z;
return this
},
multiply: function(a, b) {
var c = a.n11,
d = a.n12,
f = a.n13,
e = a.n14,
g = a.n21,
h = a.n22,
m = a.n23,
l = a.n24,
j = a.n31,
i = a.n32,
n = a.n33,
o = a.n34,
p = a.n41,
k = a.n42,
s = a.n43,
K = a.n44,
C = b.n11,
Q = b.n12,
O = b.n13,
w = b.n14,
F = b.n21,
z = b.n22,
D = b.n23,
u = b.n24,
r = b.n31,
E = b.n32,
N = b.n33,
W = b.n34,
da = b.n41,
G = b.n42,
H = b.n43,
I = b.n44;
this.n11 = c * C + d * F + f * r + e * da;
this.n12 = c * Q + d * z + f * E + e * G;
this.n13 = c * O + d * D + f * N + e * H;
this.n14 = c * w + d * u + f * W + e * I;
this.n21 = g * C + h * F + m * r + l * da;
this.n22 = g * Q + h * z + m * E + l * G;
this.n23 = g * O + h * D + m * N + l * H;
this.n24 = g * w + h * u + m * W + l * I;
this.n31 = j * C + i * F + n * r + o * da;
this.n32 = j * Q + i * z + n * E + o * G;
this.n33 = j * O + i * D + n * N + o * H;
this.n34 = j * w + i * u + n * W + o * I;
this.n41 = p * C + k * F + s * r + K * da;
this.n42 = p * Q + k * z + s * E + K * G;
this.n43 = p * O + k * D + s * N + K * H;
this.n44 = p * w + k * u + s * W + K * I;
return this
},
multiplySelf: function(a) {
return this.multiply(this, a)
},
multiplyToArray: function(a, b, c) {
this.multiply(a, b);
c[0] = this.n11;
c[1] = this.n21;
c[2] = this.n31;
c[3] = this.n41;
c[4] = this.n12;
c[5] = this.n22;
c[6] = this.n32;
c[7] = this.n42;
c[8] = this.n13;
c[9] = this.n23;
c[10] = this.n33;
c[11] = this.n43;
c[12] = this.n14;
c[13] = this.n24;
c[14] = this.n34;
c[15] = this.n44;
return this
},
multiplyScalar: function(a) {
this.n11 *= a;
this.n12 *= a;
this.n13 *= a;
this.n14 *= a;
this.n21 *= a;
this.n22 *= a;
this.n23 *= a;
this.n24 *= a;
this.n31 *= a;
this.n32 *= a;
this.n33 *= a;
this.n34 *= a;
this.n41 *= a;
this.n42 *= a;
this.n43 *= a;
this.n44 *= a;
return this
},
multiplyVector3: function(a) {
var b = a.x,
c = a.y,
d = a.z,
f = 1 / (this.n41 * b + this.n42 * c + this.n43 * d + this.n44);
a.x = (this.n11 * b + this.n12 * c + this.n13 * d + this.n14) * f;
a.y = (this.n21 * b + this.n22 * c + this.n23 * d + this.n24) * f;
a.z = (this.n31 * b + this.n32 * c + this.n33 * d + this.n34) * f;
return a
},
multiplyVector4: function(a) {
var b = a.x,
c = a.y,
d = a.z,
f = a.w;
a.x = this.n11 * b + this.n12 * c + this.n13 * d + this.n14 * f;
a.y = this.n21 * b + this.n22 * c + this.n23 * d + this.n24 * f;
a.z = this.n31 * b + this.n32 * c + this.n33 * d + this.n34 * f;
a.w = this.n41 * b + this.n42 * c + this.n43 * d + this.n44 * f;
return a
},
rotateAxis: function(a) {
var b = a.x,
c = a.y,
d = a.z;
a.x = b * this.n11 + c * this.n12 + d * this.n13;
a.y = b * this.n21 + c * this.n22 + d * this.n23;
a.z = b * this.n31 + c * this.n32 + d * this.n33;
a.normalize();
return a
},
crossVector: function(a) {
var b = new THREE.Vector4;
b.x = this.n11 * a.x + this.n12 * a.y + this.n13 * a.z + this.n14 * a.w;
b.y = this.n21 * a.x + this.n22 * a.y + this.n23 * a.z + this.n24 * a.w;
b.z = this.n31 * a.x + this.n32 * a.y + this.n33 * a.z + this.n34 * a.w;
b.w = a.w ? this.n41 * a.x + this.n42 * a.y + this.n43 * a.z + this.n44 * a.w : 1;
return b
},
multiplySelf: function(a) {
var b = this.x,
c = this.y,
d = this.z,
f = this.w,
e = a.x,
g = a.y,
h = a.z,
a = a.w;
this.x = b * a + f * e + c * h - d * g;
this.y = c * a + f * g + d * e - b * h;
this.z = d * a + f * h + b * g - c * e;
this.w = f * a - b * e - c * g - d * h;
return this
},
multiply: function(a, b) {
this.x = a.x * b.w + a.y * b.z - a.z * b.y + a.w * b.x;
this.y = -a.x * b.z + a.y * b.w + a.z * b.x + a.w * b.y;
this.z = a.x * b.y - a.y * b.x + a.z * b.w + a.w * b.z;
this.w = -a.x * b.x - a.y * b.y - a.z * b.z + a.w * b.w;
return this
},
multiplyVector3: function(a, b) {
b || (b = a);
var c = a.x,
d = a.y,
f = a.z,
e = this.x,
g = this.y,
h = this.z,
m = this.w,
l = m * c + g * f - h * d,
j = m * d + h * c - e * f,
i = m * f + e * d - g * c,
c = -e * c - g * d - h * f;
b.x = l * m + c * -e + j * -h - i * -g;
b.y = j * m + c * -g + i * -e - l * -h;
b.z = i * m + c * -h + l * -g - j * -e;
return b
}
};
THREE.Quaternion.slerp = function(a, b, c, d) {
var f = a.w * b.w + a.x * b.x + a.y * b.y + a.z * b.z;
f < 0 ? (c.w = -b.w, c.x = -b.x, c.y = -b.y, c.z = -b.z, f = -f) : c.copy(b);
if (Math.abs(f) >= 1) return c.w = a.w, c.x = a.x, c.y = a.y, c.z = a.z, c;
var e = Math.acos(f),
f = Math.sqrt(1 - f * f);
if (Math.abs(f) < 0.001) return c.w = 0.5 * (a.w + b.w), c.x = 0.5 * (a.x + b.x), c.y = 0.5 * (a.y + b.y), c.z = 0.5 * (a.z + b.z), c;
b = Math.sin((1 - d) * e) / f;
d = Math.sin(d * e) / f;
c.w = a.w * b + c.w * d;
c.x = a.x * b + c.x * d;
c.y = a.y * b + c.y * d;
c.z = a.z * b + c.z * d;
return c
};
THREE.Vertex = function(a) {
this.position = a || new THREE.Vector3
};
THREE.Face3 = function(a, b, c, d, f, e) {
this.a = a;
this.b = b;
this.c = c;
this.normal = d instanceof THREE.Vector3 ? d : new THREE.Vector3;
this.vertexNormals = d instanceof Array ? d : [];
this.color = f instanceof THREE.Color ? f : new THREE.Color;
this.vertexColors = f instanceof Array ? f : [];
this.vertexTangents = [];
this.materialIndex = e;
this.centroid = new THREE.Vector3
};
THREE.Face4 = function(a, b, c, d, f, e, g) {
this.a = a;
this.b = b;
this.c = c;
this.d = d;
this.normal = f instanceof THREE.Vector3 ? f : new THREE.Vector3;
this.vertexNormals = f instanceof Array ? f : [];
this.color = e instanceof THREE.Color ? e : new THREE.Color;
this.vertexColors = e instanceof Array ? e : [];
this.vertexTangents = [];
this.materialIndex = g;
this.centroid = new THREE.Vector3
};
THREE.UV = function(a, b) {
this.u = a || 0;
this.v = b || 0
};
THREE.UV.prototype = {
constructor: THREE.UV,
set: function(a, b) {
this.u = a;
this.v = b;
return this
},
copy: function(a) {
this.u = a.u;
this.v = a.v;
return this
},
clone: function() {
return new THREE.UV(this.u, this.v)
}
};
function wa(a, b, c, d) {
var e = ~~(a.r * 255),
f = ~~(a.g * 255),
a = ~~(a.b * 255),
g = ~~(b.r * 255),
h = ~~(b.g * 255),
b = ~~(b.b * 255),
i = ~~(c.r * 255),
j = ~~(c.g * 255),
c = ~~(c.b * 255),
k = ~~(d.r * 255),
l = ~~(d.g * 255),
d = ~~(d.b * 255);
ba[0] = e < 0 ? 0 : e > 255 ? 255 : e;
ba[1] = f < 0 ? 0 : f > 255 ? 255 : f;
ba[2] = a < 0 ? 0 : a > 255 ? 255 : a;
ba[4] = g < 0 ? 0 : g > 255 ? 255 : g;
ba[5] = h < 0 ? 0 : h > 255 ? 255 : h;
ba[6] = b < 0 ? 0 : b > 255 ? 255 : b;
ba[8] = i < 0 ? 0 : i > 255 ? 255 : i;
ba[9] = j < 0 ? 0 : j > 255 ? 255 : j;
ba[10] = c < 0 ? 0 : c > 255 ? 255 : c;
ba[12] = k < 0 ? 0 : k > 255 ? 255 : k;
ba[13] = l < 0 ? 0 : l > 255 ? 255 : l;
ba[14] = d < 0 ? 0 : d > 255 ? 255 : d;
ra.putImageData(za, 0, 0);
va.drawImage(qa, 0, 0);
return sa
}
function na(a, b, c) {
a = (a - b) / (c - b);
return a * a * (3 - 2 * a)
}
function pa(a) {
a = (a + 1) * 0.5;
return a < 0 ? 0 : a > 1 ? 1 : a
}
function ka(a, b) {
var c = b.x - a.x,
d = b.y - a.y,
e = c * c + d * d;
e != 0 && (e = 1 / Math.sqrt(e), c *= e, d *= e, b.x += c, b.y += d, a.x -= c, a.y -= d)
}
var xa, Ha, U, ca;
this.autoClear ? this.clear() : k.setTransform(1, 0, 0, -1, o, p);
e.info.render.vertices = 0;
e.info.render.faces = 0;
g = l.projectScene(a, j, this.sortElements);
h = g.elements;
m = g.lights;
(ya = m.length > 0) && i(m);
xa = 0;
for (Ha = h.length; xa < Ha; xa++)
if (U = h[xa], ca = U.material, ca = ca instanceof THREE.MeshFaceMaterial ? U.faceMaterial : ca, !(ca == null || ca.opacity == 0)) {
X.empty();
if (U instanceof THREE.RenderableParticle) u = U, u.x *= o, u.y *= p, s(u, U, ca, a);
else if (U instanceof THREE.RenderableLine) u = U.v1, r = U.v2, u.positionScreen.x *= o, u.positionScreen.y *= p, r.positionScreen.x *= o, r.positionScreen.y *= p, X.addPoint(u.positionScreen.x, u.positionScreen.y), X.addPoint(r.positionScreen.x, r.positionScreen.y), ma.intersects(X) && w(u, r, U, ca, a);
else if (U instanceof THREE.RenderableFace3) u = U.v1, r = U.v2, E = U.v3, u.positionScreen.x *= o, u.positionScreen.y *= p, r.positionScreen.x *= o, r.positionScreen.y *= p, E.positionScreen.x *= o, E.positionScreen.y *= p, ca.overdraw && (ka(u.positionScreen, r.positionScreen), ka(r.positionScreen, E.positionScreen), ka(E.positionScreen, u.positionScreen)), X.add3Points(u.positionScreen.x, u.positionScreen.y, r.positionScreen.x, r.positionScreen.y, E.positionScreen.x, E.positionScreen.y), ma.intersects(X) && C(u, r, E, 0, 1, 2, U, ca, a);
else if (U instanceof THREE.RenderableFace4) u = U.v1, r = U.v2, E = U.v3, N = U.v4, u.positionScreen.x *= o, u.positionScreen.y *= p, r.positionScreen.x *= o, r.positionScreen.y *= p, E.positionScreen.x *= o, E.positionScreen.y *= p, N.positionScreen.x *= o, N.positionScreen.y *= p, W.positionScreen.copy(r.positionScreen), da.positionScreen.copy(N.positionScreen), ca.overdraw && (ka(u.positionScreen, r.positionScreen), ka(r.positionScreen, N.positionScreen), ka(N.positionScreen, u.positionScreen), ka(E.positionScreen, W.positionScreen), ka(E.positionScreen, da.positionScreen)), X.addPoint(u.positionScreen.x, u.positionScreen.y), X.addPoint(r.positionScreen.x, r.positionScreen.y), X.addPoint(E.positionScreen.x, E.positionScreen.y), X.addPoint(N.positionScreen.x, N.positionScreen.y), ma.intersects(X) && Q(u, r, E, N, W, da, U, ca, a);
Z.addRectangle(X)
}
k.setTransform(1, 0, 0, 1, 0, 0)
}
};
THREE.RenderableVertex = function() {
this.positionWorld = new THREE.Vector3;
this.positionScreen = new THREE.Vector4;
this.visible = !0
};
THREE.RenderableVertex.prototype.copy = function(a) {
this.positionWorld.copy(a.positionWorld);
this.positionScreen.copy(a.positionScreen)
};
THREE.RenderableFace3 = function() {
this.v1 = new THREE.RenderableVertex;
this.v2 = new THREE.RenderableVertex;
this.v3 = new THREE.RenderableVertex;
this.centroidWorld = new THREE.Vector3;
this.centroidScreen = new THREE.Vector3;
this.normalWorld = new THREE.Vector3;
this.vertexNormalsWorld = [new THREE.Vector3, new THREE.Vector3, new THREE.Vector3];
this.faceMaterial = this.material = null;
this.uvs = [
[]
];
this.z = null
};
THREE.RenderableFace4 = function() {
this.v1 = new THREE.RenderableVertex;
this.v2 = new THREE.RenderableVertex;
this.v3 = new THREE.RenderableVertex;
this.v4 = new THREE.RenderableVertex;
this.centroidWorld = new THREE.Vector3;
this.centroidScreen = new THREE.Vector3;
this.normalWorld = new THREE.Vector3;
this.vertexNormalsWorld = [new THREE.Vector3, new THREE.Vector3, new THREE.Vector3, new THREE.Vector3];
this.faceMaterial = this.material = null;
this.uvs = [
[]
];
this.z = null
};
THREE.RenderableObject = function() {
this.z = this.object = null
};
THREE.RenderableParticle = function() {
this.rotation = this.z = this.y = this.x = null;
this.scale = new THREE.Vector2;
this.material = null
};
THREE.RenderableLine = function() {
this.z = null;
this.v1 = new THREE.RenderableVertex;
this.v2 = new THREE.RenderableVertex;
this.material = null
};
function randomRange(t, i) {
return Math.random() * (i - t) + t
}
Particle3D = function(t) {
THREE.Particle.call(this, t), this.velocity = new THREE.Vector3(0, -2, 0), this.velocity.rotateX(randomRange(-45, 45)), this.velocity.rotateY(randomRange(0, 360)), this.gravity = new THREE.Vector3(0, 0, 0), this.drag = 1
}, Particle3D.prototype = new THREE.Particle, Particle3D.prototype.constructor = Particle3D, Particle3D.prototype.updatePhysics = function() {
this.velocity.multiplyScalar(this.drag), this.velocity.addSelf(this.gravity), this.position.addSelf(this.velocity)
};
var TO_RADIANS = Math.PI / 180;
THREE.Vector3.prototype.rotateY = function(t) {
cosRY = Math.cos(t * TO_RADIANS), sinRY = Math.sin(t * TO_RADIANS);
var i = this.z,
o = this.x;
this.x = o * cosRY + i * sinRY, this.z = o * -sinRY + i * cosRY
}, THREE.Vector3.prototype.rotateX = function(t) {
cosRY = Math.cos(t * TO_RADIANS), sinRY = Math.sin(t * TO_RADIANS);
var i = this.z,
o = this.y;
this.y = o * cosRY + i * sinRY, this.z = o * -sinRY + i * cosRY
}, THREE.Vector3.prototype.rotateZ = function(t) {
cosRY = Math.cos(t * TO_RADIANS), sinRY = Math.sin(t * TO_RADIANS);
var i = this.x,
o = this.y;
this.y = o * cosRY + i * sinRY, this.x = o * -sinRY + i * cosRY
};
$(function() {
var container = document.querySelector(".snowback");
if (/MSIE 6|MSIE 7|MSIE 8/.test(navigator.userAgent)) {
return
} else {
if (/MSIE 9|MSIE 10/.test(navigator.userAgent)) {
$(container).css("height", $(window).height()).bind("click", function() {
$(this).remove()
})
}
}
var containerWidth = $(container).width();
var containerHeight = $(container).height();
var particle;
var camera;
var scene;
var renderer;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var particles = [];
var particleImage = new Image();
particleImage.src = "./image/snow.png";
var snowNum = 500;
function init() {
camera = new THREE.PerspectiveCamera(75, containerWidth / containerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.CanvasRenderer();
renderer.setSize(containerWidth, containerHeight);
var material = new THREE.ParticleBasicMaterial({
map: new THREE.Texture(particleImage)
});
for (var i = 0; i < snowNum; i++) {
particle = new Particle3D(material);
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = 1;
scene.add(particle);
particles.push(particle)
}
container.appendChild(renderer.domElement);
document.addEventListener("mousemove", onDocumentMouseMove, false);
setInterval(loop, 1000 / 40)
}
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY
}
function onDocumentTouchStart(event) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY
}
}
function onDocumentTouchMove(event) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
mouseY = event.touches[0].pageY - windowHalfY
}
}
function loop() {
for (var i = 0; i < particles.length; i++) {
var particle = particles[i];
particle.updatePhysics();
with(particle.position) {
if (y < -1000) {
y += 2000
}
if (x > 1000) {
x -= 2000
} else {
if (x < -1000) {
x += 2000
}
}
if (z > 1000) {
z -= 2000
} else {
if (z < -1000) {
z += 2000
}
}
}
}
camera.position.x += (mouseX - camera.position.x) * 0.005;
camera.position.y += (-mouseY - camera.position.y) * 0.005;
camera.lookAt(scene.position);
renderer.render(scene, camera)
}
init()
});
以上就是基于JS实现简单的3D立方体自动旋转的详细内容，更多关于JS 3D立方体自动旋转的资料请关注自由互联其它相关文章！