three实现啤酒杯中液体漂浮指针时钟显示时间代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：three实现啤酒杯中液体漂浮指针时钟显示时间代码，还有上浮的啤酒泡泡。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

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

  
  
<style>
body{
  overflow: hidden;
  margin: 0;
  background-color: #aaa;
}
#handle {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(10%, -60%);
}
#cnv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}
</style>

  
</head>

<body translate="no">
  <div id="handle"></div>
<canvas id="cnv"></canvas>
  
      <script type="module">
import { Clock, MathUtils } from "//repo.bfw.wiki/bfwrepo/js/module/three/build/161/three.module.js";
import { SimplexNoise } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/161/jsm/math/SimplexNoise.js";

console.clear();

// load fonts
await (async function () {
  async function loadFont(fontface) {
    await fontface.load();
    document.fonts.add(fontface);
  }
  let fonts = [
    new FontFace(
      "Lato",
      "url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh50XSwiPGQ.woff2) format('woff2')"
    )
  ];
  for (let font in fonts) {
    //console.log(fonts[font]);
    await loadFont(fonts[font]);
  }
})();

let simplex = new SimplexNoise();

let unitY = (val) => val * 0.01 * cnv.height;
let unitX = (val) => val * 0.01 * cnv.height * 0.5;

function resize() {
  cnv.width = cnv.height = window.innerHeight * 0.95;
  cnv.width *= 0.5;
  cnv.style.border = `${unitY(1)}px solid #666`;
  cnv.style.borderRadius = `${unitY(10)}px`;
  handle.style.width = cnv.width * 0.5 + "px";
  handle.style.height = cnv.height * 0.3 + "px";
  handle.style.border = `${unitY(10)}px solid #666`;
  handle.style.borderRadius = `${unitY(15)}px`;
}
resize();
window.addEventListener("resize", (event) => {
  resize();
});

let $ = cnv.getContext("2d");

class Bubble {
  constructor() {
    this.currX = 0;
    this.currY = 0;
    this.x = 0;
    this.y = 0;
    this.border = 0.5;
    this.radius = 0;
    this.speed = 0;
    this.color = 60;
    this.init();
  }
  init() {
    this.x = 10 + Math.random() * 80;
    this.y = 30 + Math.random() * 65;
    let currX = this.x;
    let currY = this.y;
    this.currX = currX;
    this.currY = currY;
    this.radius = 1 + Math.random() * 1;
    this.speed = 0.1 + Math.random() * 0.1;
  }

  update() {
    this.currY -= this.speed;
    if (this.currY <= 10) {
      this.init();
    }
  }

  draw() {
    let a = 1 - MathUtils.smoothstep(this.currY, this.y - 5, this.y);
    $.strokeStyle = `hsla(${0}, 75%, 100%, ${a})`;
    $.lineWidth = unitY(this.border);
    $.beginPath();
    $.arc(
      unitX(this.currX),
      unitY(this.currY),
      unitY(this.radius),
      0,
      Math.PI * 2
    );
    $.stroke();
  }
}

class Bubbles {
  constructor() {
    this.bubbles = new Array(50).fill().map((_) => {
      return new Bubble();
    });
    console.log(this);
  }

  draw() {
    $.save();
    this.bubbles.forEach((b) => {
      b.update();
      b.draw();
    });
    $.restore();
  }
}

class Beer {
  constructor() {
    this.bubbles = new Bubbles();
    this.parts = {
      bottom: [
        { x: 0, y: 100 },
        { x: 100, y: 100 }
      ],
      top: [
        { x: 100, y: 20 },
        { x: 66, y: 20 },
        { x: 33, y: 20 },
        { x: 0, y: 20 }
      ]
    };

    this.mediators = {
      top: new Array(4).fill().map((_) => {
        return { x: 0, y: 0 };
      })
    };
  }
  draw(time) {
    $.save();
    let t = time * 0.25;
    let multiplier = 0.01;
    $.fillStyle = "#FAE96F";
    let mt = this.mediators.top;
    mt.forEach((m, idx) => {
      m.x = this.parts.top[idx].x;
      m.y = this.parts.top[idx].y;

      let yShift = simplex.noise3d(m.x * multiplier, m.y * multiplier, t);
      m.y += yShift * 5;
    });
    $.beginPath();
    $.moveTo(unitX(this.parts.bottom[0].x), unitY(this.parts.bottom[0].y));
    $.lineTo(unitX(this.parts.bottom[1].x), unitY(this.parts.bottom[1].y));
    $.lineTo(unitX(mt[0].x), unitY(mt[.........完整代码请登录后点击上方下载按钮下载查看