regl实现三维发光灯管效果代码-html代码-BFW代码库

regl实现三维发光灯管效果代码

代码语言：html

所属分类：三维

代码描述：regl实现三维发光灯管效果代码

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

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

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

  
  
<style>
#display {
  position: absolute;
  inset: 0;
}

.input {
  position: absolute;
  left: 0;
  top: 0;
}
</style>

  
</head>

<body translate="no">

  
   <div id="display" ></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/regl.2.1.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gl-matrix-min.js"></script>
      <script  >
const regl = createREGL({
  container: document.querySelector("#display"),
  pixelRatio: Math.min(2, window.devicePixelRatio)
});
const { mat4 } = glMatrix;

const c = document.querySelector("#display");

function makeCtx(
  w,
  h,
  pixelRatio = 1
) {
  const canvas = document.createElement("canvas");
  canvas.width = w * pixelRatio;
  canvas.height = h * pixelRatio;
  const ctx = canvas.getContext("2d");
  if (!ctx) {
    throw new Error("2D контекст не доступен");
  }
  ctx.scale(pixelRatio, pixelRatio);
  return ctx;
}

const getGradientData = (height, colorStops, getColor) => {
  const ctx = makeCtx(1, height);
  const gradient = ctx.createRadialGradient(0, 0, 0, 0, height, height);

  colorStops.forEach((stop) => {
    gradient.addColorStop(stop.position, getColor(stop));
  });

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  return ctx.getImageData(0, 0, 1, height);
};

const colorStops = [
  { position: 0, color: "red", opacity: 0.0 },
  { position: 0.25, color: "orange", opacity: 0.5.........完整代码请登录后点击上方下载按钮下载查看