regl+gl-matrix+webgl实现彩色立方体动画效果代码-html代码-BFW代码库

regl+gl-matrix+webgl实现彩色立方体动画效果代码

代码语言：html

所属分类：动画

代码描述：regl+gl-matrix+webgl实现彩色立方体动画效果代码

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

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

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


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


</head>

<body translate="no">


   <div id="display" />

<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-3.4.2.js"></script>
      <script >
const regl = createREGL({
  container: document.querySelector("#display"),
  extensions: ["ANGLE_instanced_arrays"] });

const { mat4 } = glMatrix;

// Геометрия куба с правильными вершинами для каждой грани
const cubeVertices = [
// Передняя грань
[-0.5, -0.5, -0.5], [0.5, -0.5, -0.5], [0.5, 0.5, -0.5],
[-0.5, -0.5, -0.5], [0.5, 0.5, -0.5], [-0.5, 0.5, -0.5],

// Задняя грань
[0.5, -0.5, 0.5], [-0.5, -0.5, 0.5], [-0.5, 0.5, 0.5],
[0.5, -0.5, 0.5], [-0.5, 0.5, 0.5], [0.5, 0.5, 0.5],

// Нижняя грань
[-0.5, -0.5, -0.5], [-0.5, -0.5, 0.5], [0.5, -0.5, 0.5],
[-0.5, -0.5, -0.5], [0.5, -0.5, 0.5], [0.5, -0.5, -0.5],

// Верхняя грань
[-0.5, 0.5, 0.5], [-0.5, 0.5, -0.5], [0.5, 0.5, -0.5],
[-0.5, 0.5, 0.5], [0.5, 0.5, -0.5], [0.5, 0.5, 0.5],

// Левая грань
[-0.5, -0.5, 0.5], [-0.5, -0.5, -0.5], [-0.5, 0.5, -0.5],
[-0.5, -0.5, 0.5], [-0.5, 0.5, -0.5], [-0.5, 0.5, 0.5],

// Правая грань
[0.5, -0.5, -0.5], [0.5, -0.5, 0.5], [0.5, 0.5, 0.5],
[0.5, -0.5, -0.5], [0.5, 0.5, 0.5], [0.5, 0.5, -0.5]];


// Правильные нормали для каждой грани.........完整代码请登录后点击上方下载按钮下载查看