babylon.js实现三维矩阵火燃烧动画效果代码-html代码-BFW代码库

babylon.js实现三维矩阵火燃烧动画效果代码

代码语言：html

所属分类：动画

代码描述：babylon.js实现三维矩阵火燃烧动画效果代码

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

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

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babylon-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babylonjs.loaders.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pep.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        html,
        body {
          font: 1em sans-serif;
          overflow: hidden;
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
        }
        
        #renderCanvas {
          width: 100%;
          height: 100%;
          touch-action: none;
        }
        
        a {
          color: red;
        }
        
        #madeby {
          position: fixed; 
          left: 0; 
          bottom: 0; 
          background-color: #3c3c3c;
          color: white;
          padding: 0.7rem;
          border-top-right-radius: 8px;
        }
    </style>



</head>

<body>
    <canvas id="renderCanvas" touch-action="none"></canvas>



    <script>
        /*
    * References:
    * - https://fabiensanglard.net/doom_fire_psx/index.html
    * - https://github.com/filipedeschamps/doom-fire-algorithm
    */
    const canvas = document.getElementById('renderCanvas')
    const engine = new BABYLON.Engine(canvas, true)
    
    const fireWidth = 40
    const fireHeight = 40
    const fireVoxels = []
    const fireVoxelsIntensities = []
    
    const firePallete =  [
      [7, 7, 7],
      [31, 7, 7],
      [47, 15, 7],
      [71, 15, 7],
      [87, 23, 7],
      [103, 31, 7],
      [119, 31, 7],
      [143, 39, 7],
      [159, 47, 7],
      [175, 63, 7],
      [191, 71, 7],
      [199, 71, 7],
      [223, 79, 7],
.........完整代码请登录后点击上方下载按钮下载查看