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],
      [223, 87, 7],
      [223, 87, 7],
      [215, 95, 7],
      [215, 95, 7],
      [215, 103, 15],
      [207, 111, 15],
      [207, 119, 15],
      [207, 127, 15],
      [207, 135, 23],
      [199, 135, 23],
      [199, 143, 23],
      [199, 151, 31],
      [191, 159, 31],
      [191, 159, 31],
      [191, 167, 39],
      [191, 167, 39],
      [191, 175, 47],
      [183, 175, 47],
      [183, 183, 47],
      [183, 183, 55],
      [207, 207, 111],
      [223, 223, 159],
      [239, 239, 199],
      [255, 255, 255]
    ]
    
    const createScene = function () {
      const scene = new BABYLON.Scene(engine)
      scene.clearColor = new BABYLON.Color3.FromHexString('#000000')
    
      const camera = new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2.5, 50, new BABYLON.Vector3(0, 0, 0))
      camera.attachControl(canvas, true)
    
      const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(1, 1, -5))
      light.intensity = 1.25
    
      createV.........完整代码请登录后点击上方下载按钮下载查看