canvas三维布料漂浮空间动画效果代码-html代码-BFW代码库

canvas三维布料漂浮空间动画效果代码

代码语言：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() {
  oX = oY = oZ = 0;
  if (!t) {
    reflect = (a, n) => {
      let d1 = Math.hypot(...a) + .0001;
      let d2 = Math.hypot(...n) + .0001;
      a[0] /= d1;
      a[1] /= d1;
      a[2] /= d1;
      n[0] /= d2;
      n[1] /= d2;
      n[2] /= d2;
      let dot = -a[0] * n[0] + -a[1] * n[1] + -a[2] * n[2];
      let rx = -a[0] - 2 * n[0] * dot;
      let ry = -a[1] - 2 * n[1] * dot;
      let rz = -a[2] - 2 * n[2] * dot;
      return [-rx * d1, -ry * d1, -rz * d1];
    };

    HSVFromRGB = (R, G, B) => {
      let R_ = R / 256;
      let G_ = G / 256;
      let B_ = B / 256;
      let Cmin = Math.min(R_, G_, B_);
      let Cmax = Math.max(R_, G_, B_);
      let val = Cmax; //(Cmax+Cmin) / 2
      let delta = Cmax - Cmin;
      let sat = Cmax ? delta / Cmax : 0;
      let min = Math.min(R, G, B);
      let max = Math.max(R, G, B);
      let hue = 0;
      if (delta) {
        if (R >= G && R >= B) hue = (G - B) / (max - min);
        if (G >= R && G >= B) hue = 2 + (B - R) / (max - min);
        if (B >= G && B >= R) hue = 4 + (R - G) / (max - min);
      }
      hue *= 60;
      while (hue < 0) hue += 360;
      while (hue >= 360) hue -= 360;
      return [hue, sat, val];
    };

    RGBFromHSV = (H, S, V) => {
      while (H < 0) H += 360;
      while (H >= 360) H -= 360;
      let C = V * S;
      let X = C * (1 - Math.abs(H / 60 % 2 - 1));
      let m = V - C;
      let R_, G_, B_;
      if (H >= 0 && H < 60) R_ = C, G_ = X, B_ = 0;
      if (H >= 60 && H < 120) R_ = X, G_ = C, B_ = 0;
      if (H >= 120 && H < 180) R_ = 0, G_ = C, B_ = X;
      if (H >= 180 && H < 240) R_ = 0, G_ = X, B_ = C;
      if (H >= 240 && H < 300) R_ = X, G_ = 0, B_ = C;
      if (H >= 300 && H < 360) R_ = C, G_ = 0, B_ = X;
      let R = (R_ + m) * 256;
      let G = (G_ + m) * 256;
      let B = (B_ + m) * 256;
      return [R, G, B];
    };

    R = R2 = (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 * 700, c.height / 2 + Y / Z * 700];
    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, recenter = true) {
      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.spl.........完整代码请登录后点击上方下载按钮下载查看