canvas实现三维点面碰撞动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：canvas实现三维点面碰撞动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body,html{
  background: #000;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}
#c{
  background:#000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

  
</head>

<body>
  <canvas id=c>


  
      <script  >
c = document.querySelector('#c');
c.width = 1920;
c.height = 1080;
x = c.getContext('2d');
C = Math.cos;
S = Math.sin;
t = 0;
T = Math.tan;

rsz = window.onresize = () => {
  setTimeout(() => {
    if (document.body.clientWidth > document.body.clientHeight * 1.77777778) {
      c.style.height = '100vh';
      setTimeout(() => c.style.width = c.clientHeight * 1.77777778 + 'px', 0);
    } else {
      c.style.width = '100vw';
      setTimeout(() => c.style.height = c.clientWidth / 1.77777778 + 'px', 0);
    }
  }, 0);
};
rsz();

async function Draw() {

  if (!t) {
    R = (Rl, Pt, Yw, m) => {
      M = Math;
      A = M.atan2;
      H = M.hypot;
      X = S(p = A(X, Z) + Yw) * (d = H(X, Z));
      Z = C(p) * d;
      Y = S(p = A(Y, Z) + Pt) * (d = H(Y, Z));
      Z = C(p) * d;
      X = S(p = A(X, Y) + Rl) * (d = H(X, Y));
      Y = C(p) * d;
      if (m) {
        X += oX;
        Y += oY;
        Z += oZ;
      }
    };
    Q = () => [c.width / 2 + X / Z * 900, c.height / 2 + Y / Z * 900];
    I = (A, B, M, D, E, F, G, H) => (K = ((G - E) * (B - F) - (H - F) * (A - E)) / (J = (H - F) * (M - A) - (G - E) * (D - B))) >= 0 && K <= 1 && (L = ((M - A) * (B - F) - (D - B) * (A - E)) / J) >= 0 && L <= 1 ? [A + K * (M - A), B + K * (D - B)] : 0;

    Rn = Math.random;

    async function loadOBJ(url, scale, tx, ty, tz, rl, pt, yw) {
      let res;
      await fetch(url, res => res).then(data => data.text()).then(data => {
        a = [];
        data.split("\nv ").map(v => {
          a = [...a, v.split("\n")[0]];
        });
        a = a.filter((v, i) => i).map(v => [...v.split(' ').map(n => +n.replace("\n", ''))]);
        ax = ay = az = 0;
        a.map(v => {
          v[1] *= -1;
          ax += v[0];
          ay += v[1];
          az += v[2];
        });
        ax /= a.length;
        ay /= a.length;
        az /= a.length;
        a.map(v => {
          X = (v[0] - ax) * scale;
          Y = (v[1] - ay) * scale;
          Z = (v[2] - az) * scale;
          R2(rl, pt, yw, 0);
          v[0] = X;
          v[1] = Y;
          v[2] = Z;
        });
        maxY = -6e6;
        a.map(v => {
          if (v[1] > maxY) maxY = v[1];
        });
        a.map(v => {
          v[1] -= maxY - oY;
          v[0] += tx;
          v[1] += ty;
          v[2] += tz;
        });

        b = [];
        data.split("\nf ").map(v => {
          b = [...b, v.split("\n")[0]];
        });
        b.shift();
        b = b.map(v => v.split(' '));
        b = b.map(v => {
          v = v.map(q => {
            return +q.split('/')[0];
          });
          v = v.filter(q => q);
          return v;
        });

        res = [];
        b.map(v => {
          e = [];
          v.map(q => {
            e = [...e, a[q - 1]];
          });
          e = e.filter(q => q);
          res = [...res, e];
        });
      });
      return res;
    }

    geoSphere = (mx, my, mz, iBc, size) => {
      let collapse = 0;
      let B = Array(iBc).fill().map(v => {
        X = Rn() - .5;
        Y = Rn() - .5;
        Z = Rn() - .5;
        return [X, Y, Z];
      });
      for (let m = 150; m--;) {
        B.map((v, i) => {
          X = v[0];
          Y = v[1];
          Z = v[2];
          B.map((q, j) => {
            if (j != i) {
              X2 = q[0];
              Y2 = q[1];
              Z2 = q[2];
              d = 1 + (Math.hypot(X - X2, Y - Y2, Z - Z2) * (3 + iBc / 40) * 3) ** 4;
              X += (X - X2) * 1e3 / d;
              Y += (Y - Y2) * 1e3 / d;
              Z += (Z - Z2) * 1e3 / d;
            }
          });
          d = Math.hypot(X, Y, Z);
          v[0] = X / d;
          v[1] = Y / d;
          v[2] = Z / d;
          if (collapse) {
            d = 25 + Math.hypot(X, Y, Z);
            v[0] = (X - X / d) / 1.1;
            v[1] = (Y - Y / d) / 1.1;
            v[2] = (Z - Z / d) / 1.1;
          }
        });
      }
      mind = 6e6;
      B.map((v, i) => {
        X1 = v[0];
        Y1 = v[1];
        Z1 = v[2];
        B.map((q, j) => {
          X2 = q[0];
          Y2 = q[1];
          Z2 = q[2];
          if (i != j) {
            d = Math.hypot(a = X1 - X2, b = Y1 - Y2, e = Z1 - Z2);
            if (d < mind) mind = d;
          }
        });
      });
      a = [];
      B.map((v, i) => {
        X1 = v[0];
        Y1 = v[1];
        Z1 = v[2];
        B.map((q, j) => {
          X2 = q[0];
          Y2 = q[1];
          Z2 = q[2];
          if (i != j) {
            d = Math.hypot(X1 - X2, Y1 - Y2, Z1 - Z2);
            if (d < mind * 2) {
              if (!a.filter(q => q[0] == X2 && q[1] == Y2 && q[2] == Z2 && q[3] == X1 && q[4] == Y1 && q[5] == Z1).length) a = [...a, [X1 * size, Y1 * size, Z1 * size, X2 * size, Y2 * size, Z2 * size]];
            }
          }
        });
      });
      B.map(v => {
        v[0] *= size;
        v[1] *= size;
        v[2] *= size;
        v[0] += mx;
        v[1] += my;
        v[2] += mz;
      });
      return [mx, my, mz, size, B, a];
    };

    lineFaceI = (X1, Y1, Z1, X2, Y2, Z2, facet, autoFlipNormals = false, showNormals = false) => {
      let I_ = (A, B, M, D, E, F, G, H) => (K = ((G - E) * (B - F) - (H - F) * (A - E)) / (J = (H - F) * (M - A) - (G - E) * (D - B))) >= 0 && K <= 1 && (L = ((M - A) * (B - F) - (D - B) * (A - E)) / J) >= 0 && L <= 1 ? [A + K * (M - A), B + K * (D - B)] : 0;
      let R_ = (Rl, Pt, Yw) => {
        let M = Math,A = M.atan2,H = M.hypot;
        X = S(p = A(X, Y) + Rl) * (d = H(X, Y)), Y = C(p) * d, X = S(p = A(X, Z) + Yw) * (d = H(X, Z)), Z = C(p) * d, Y = S(p = A(Y, Z) + Pt) * (d = H(Y, Z)), Z = C(p) * d;
      };
      let rotSwitch = m => {
        switch (m) {
          case 0:R_(0, 0, Math.PI / 2);break;
          case 1:R_(0, Math.PI / 2, 0);break;
          case 2:R_(Math.PI / 2, 0, Math.PI / 2);break;}

      };
      let ax = 0,ay = 0,az = 0;
      facet.map(q_ => {ax += q_[0], ay += q_[1], az += q_[2];});
      ax /= facet.length, ay /= facet.length, az /= facet.length;
      let b1 = facet[2][0] - facet[1][0],b2 = facet[2][1] - facet[1][1],b3 = facet[2][2] - facet[1][2];
      let c1 = facet[1][0] - facet[0][0],c2 = facet[1][1] - facet[0][1],c3 = facet[1][2] - facet[0][2];
      let crs = [b2 * c3 - b3 * c2, b3 * c1 - b1 * c3, b1 * c2 - b2 * c1];
      let d = Math.hypot(...crs) + .001;
      let nls = 1; //normal line length
      crs = crs.map(q => q / d * nls);
      let X1_ = ax,Y1_ = ay,Z1_ = az;
      let flip = 1;
      if (autoFlipNormals) {
        let d1_ = Math.hypot(X1_ - X1, Y1_ - Y1, Z1_ - Z1);
        let d2_ = Math.hypot(X1 - (ax + crs[0] / 99), Y1 - (ay + crs[1] / 99), Z1 - (az + crs[2] / 99));
        flip = d2_ > d1_ ? -1 : 1;
      }
      let X2_ = ax + (crs[0] *= flip),Y2_ = ay + (crs[1] *= flip),Z2_ = az + (crs[2] *= flip);

      if (showNormals) {
        x.beginPath();
        X = X1_, Y = Y1_, Z = Z1_;
        R(Rl, Pt, Yw, 1);
        if (Z > 0) x.lineTo(...Q());
        X = X2_, Y = Y2_, Z = Z2_;
        R(Rl, Pt, Yw, 1);
        if (Z > 0) x.lineTo(...Q());
        stroke('#f00', '', .5, true);
      }

      let p1_ = Math.atan2(X2_ - X1_, Z2_ - Z1_);
      let p2_ = -(Math.acos((Y2_ - Y1_) / (Math.hypot(X2_ - X1_, Y2_ - Y1_, Z2_ - Z1_) + .001)) + Math.PI / 2);
      let isc = false,iscs = [false, false, false];
      X = X1, Y = Y1, Z = Z1;
      R_(0, -p2_, -p1_);
      let rx_ = X,ry_ = Y,rz_ = Z;
      for (let m = 3; m--;) {
        if (isc === false) {
          X = rx_, Y = ry_, Z = rz_;
          rotSwitch(m);
          X1_ = X, Y1_ = Y, Z1_ = Z = 5, X = X2, Y = Y2, Z = Z2;
          R_(0, -p2_, -p1_);
          rotSwitch(m);
          X2_ = X, Y2_ = Y, Z2_ = Z;
          facet.map((q_, j_) => {
            if (isc === false) {
              let l = j_;
              X = facet[l][0], Y = facet[l][1], Z = facet[l][2];
              R_(0, -p2_, -p1_);
              rotSwitch(m);
              let X3_ = X,Y3_ = Y,Z3_ = Z;
              l = (j_ + 1) % facet.length;
              X = facet[l][0], Y = facet[l][1], Z = facet[l][2];
              R_(0, -p2_, -p1_);
              rotSwitch(m);
              let X4_ = X,Y4_ = Y,Z4_ = Z;
              if (l_ = I_(X1_, Y1_, X2_, Y2_, X3_, Y3_, X4_, Y4_)) iscs[m] = l_;
            }
          });
        }
      }
      if (iscs.filter(v => v !== false).length == 3) {
        let iscx = iscs[1][0],iscy = iscs[0][1],iscz = iscs[0][0];
        let pointInPoly = true;
        ax = 0, ay = 0, az = 0;
        facet.map((q_, j_) => {ax += q_[0], ay += q_[1], az += q_[2];});
        ax /= facet.length, ay /= facet.length, az /= facet.length;
        X = ax, Y = ay, Z = az;
        R_(0, -p2_, -p1_);
        X1_ = X, Y1_ = Y, Z1_ = Z;
        X2_ = iscx, Y2_ = iscy, Z2_ = iscz;
        facet.map((q_, j_) => {
          if (pointInPoly) {
            let l = j_;
            X = facet[l][0], Y = facet[l][1], Z = facet[l][2];
            R_(0, -p2_, -p1_);
            let X3_ = X,Y3_ = Y,Z3_ = Z;
            l = (j_ + 1) % facet.length;
            X = facet[l][0], Y = facet[l][1], Z = facet[l][2];
            R_(0, -p2_, -p1_);
            let X4_ = X,Y4_ = Y,Z4_ = Z;
            if (I_(X1_, Y1_, X2_, Y2_, X3_, Y3_, X4_, Y4_)) pointInPoly = false;
          }
        });
        if (pointInPoly) {
          X = iscx, Y = iscy, Z = iscz;
          R_(0, p2_, 0);
          R_(0, 0, p1_);
          isc = [[X, Y, Z], [crs[0], crs[1], crs[2]]];
        }
      }
      return isc;
    };

    Cylinder = (rw, cl, ls1, ls2) => {
      let a = [];
      for (let i = rw; i--;) {
        let b = [];
        for (let j = cl; j--;) {
          X = S(p = Math.PI * 2 / cl * j) * ls1;
          Y = (1 / rw * i - .5) * ls2;
          Z = C(p) * ls1;
          b = [...b, [X, Y, Z]];
        }
        //a = [...a, b]
        for (let j = cl; j--;) {
          b = [];
          X = S(p = Math.PI * 2 / cl * j) * ls1;
          Y = (1 / rw * i - .5) * ls2;
          Z = C(p) * ls1;
          b = [...b, [X, Y, Z]];
          X = S(p = Math.PI * 2 / cl * (j + 1)) * ls1;
          Y = (1 / rw * i - .5) * ls2;
          Z = C(p) * ls1;
          b = [...b, [X, Y, Z]];
          X = S(p = Math.PI * 2 / cl * (j + 1)) * ls1;
          Y = (1 / rw * (i + 1) - .5) * ls2;
          Z = C(p) * ls1;
          b = [...b, [X, Y, Z]];
          X = S(p = Math.PI * 2 / cl * j) * ls1;
          Y = (1 / rw * (i + 1) - .5) * ls2;
          Z = C(p) * ls1;
          b = [...b, [X, Y, Z]];
          a = [...a, b];
        }
      }
      b = [];
      for (let j = cl; j--;) {
        X = S(p = Math.PI * 2 / cl * j) * ls1;
        Y = ls2 / 2;
        Z = C(p) * ls1;
        b = [...b, [X, Y, Z]];
      }
      //a = [...a, b]
      return a;
    };

    Tetrahedron = size => {
      ret = [];
      a = [];
      let h = size / 1.4142 / 1.25;
      for (i = 3; i--;) {
        X = S(p = Math.PI * 2 / 3 * i) * size / 1.25;
        Y = C(p) * size / 1.25;
        Z = h;
        a = [...a, [X, Y, Z]];
      }
      ret = [...ret, a];
      for (j = 3; j--;) {
        a = [];
        X = 0;
        Y = 0;
        Z = -h;
        a = [...a, [X, Y, Z]];
        X = S(p = Math.PI * 2 / 3 * j) * size / 1.25;
        Y = C(p) * size / 1.25;
        Z = h;
        a = [...a, [X, Y, Z]];
        X = S(p = Math.PI * 2 / 3 * (j + 1)) * size / 1.25;
        Y = C(p) * size / 1.25;
        Z = h;
        a = [...a, [X, Y, Z]];
        ret = [...ret, a];
      }
      ax = ay = az = ct = 0;
      ret.map(v => {
        v.map(q => {
          ax += q[0];
          ay += q[1];
          az += q[2];
          ct++;
        });
      });
      ax /= ct;
      ay /= ct;
      az /= ct;
      ret.map(v => {
        v.map(q => {
          q[0] -= ax;
          q[1] -= ay;
          q[2] -= az;
        });
      });
      return ret;
    };

    Cube = size => {
      for (CB = [], j = 6; j--; CB = [...CB, b]) for (b = [], i = 4; i--;) b = [...b, [(a = [S(p = Math.PI * 2 / 4 * i + Math.PI / 4), C(p), 2 ** .5 / 2])[j % 3] * (l = j < 3 ? size / 1.5 : -size / 1.5), a[(j + 1) % 3] * l, a[(j + 2) % 3] * l]];
      return CB;
    };

    Octahedron = size => {
      ret = [];
      let h = size / 1.25;
      for (j = 8; j--;) {
        a = [];
        X = 0;
        Y = 0;
        Z = h * (j < 4 ? -1 : 1);
        a = [...a, [X, Y, Z]];
        X = S(p = Math.PI * 2 / 4 * j) * size / 1.25;
        Y = C(p) * size / 1.25;
        Z = 0;
        a = [...a, [X, Y, Z]];
        X = S(p = Math.PI * 2 / 4 * (j + 1)) * size / 1.25;
        Y = C(p) * size / 1.25;
        Z = 0;
        a = [...a, [X, Y, Z]];
        ret = [...ret, a];
      }
      return ret;
    };

    Dodecahedron = size => {
      ret = [];
      a = [];
      mind = -6e6;
      for (i = 5; i--;) {
        X = S(p = Math.PI * 2 / 5 * i + Math.PI / 5);
        Y = C(p);
        Z = 0;
        if (Y > mind) mind = Y;
        a = [...a, [X, Y, Z]];
      }
      a.map(v => {
        X = v[0];
        Y = v[1] -= mind;
        Z = v[2];
        R(0, .553573, 0);
        v[0] = X;
        v[1] = Y;
        v[2] = Z;
      });
      b = JSON.parse(JSON.stringify(a));
    .........完整代码请登录后点击上方下载按钮下载查看