基于JS实现简单的3D立方体自动旋转

目录

• 演示
• 技术栈
• 源码
• 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 
 

雪花部分

//使用时去掉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立方体自动旋转的资料请关注脚本之家其它相关文章！