three+lil-gui实现三维可调节参数的壁炉火苗燃烧效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three+lil-gui实现三维可调节参数的壁炉火苗燃烧效果代码

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

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

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

  
  
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
.webgl {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  outline: none;
  background-color: #000000;
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -webkit-grab;
}

#credits {
  position: absolute;
  width: 100%;
  margin: auto;
  bottom: 0;
  margin-bottom: 20px;
  font-family: "Open Sans", sans-serif;
  color: #eeeeee;
  font-size: 0.7em;
  text-transform: uppercase;
  text-align: center;
}

#credits a {
  color: #555555;
}

#credits a:hover {
  color: #ffffff;
}
</style>

  
  
</head>

<body translate="no">
  <canvas class="webgl"></canvas>



<script type="x-shader/x-vertex" id="basicVert">
  precision highp float;
  varying vec2 vUv;
  void main() {
    vUv = uv;
    vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * modelViewPosition; 
  }
</script>

<script type="x-shader/x-fragment" id="rgbLightmapFrag">
  uniform sampler2D map;
  uniform float ratioR;
  uniform float ratioG;
  uniform float ratioB;
  uniform float gamma;
  varying vec2 vUv;
  void main(void) {
    vec4 tex = texture2D(map, vUv);
    // using RGB channels of the texture de vary the lighting
    float col = tex.r * ratioR + tex.g * ratioG + tex.b * ratioB;
    // adjust contrast
    col = pow(col, gamma);
    gl_FragColor = linearToOutputTexel(vec4(col, col, col, 1.));
  }
</script>

<script type="x-shader/x-vertex" id="fireVert">
  precision highp float;
  uniform sampler2D noiseMap;
  uniform float time;
  uniform float intensity;
  varying vec2 vUv;
  void main() {
    vUv = uv;
    // using a noise texture to displace the geometry
    vec4 noise = texture2D(noiseMap, vUv * .3 + vec2(0., -time * .2));
    
    vec3 pos = position;
    pos.y *= intensity;
    
    vec3 displacement = vec3(0., 0., 0.);
    displacement.z += (-.5 + noise.g) * .1 * vUv.y;
    displacement.y += (-.5 + noise.r) * .2 * vUv.y ;
    
    vec4 modelViewPosition = modelViewMatrix * vec4(pos + displacement, 1.0);
    gl_Position = projectionMatrix * modelViewPosition; 
  }
</script>

<script type="x-shader/x-fragment" id="fireFrag">
  uniform sampler2D noiseMap;
  uniform float time;
  uniform float opacity;
  uniform float stylizeRatio;
  uniform float stylizeThreshold;
  uniform float details;
  uniform bool grayscale;
  varying vec2 vUv;
  
  float makeBorders(vec2 uv, float top, float left, float bottom, float right, float gradient){
    float t = 1. - smoothstep(top, top + gradient, uv.y);
    float b = smoothstep(bottom - gradient, bottom, uv.y);
    float r = 1. - smoothstep(right, right + gradient, uv.x);
    float l = smoothstep(left - gradient, left, uv.x);
    return t*b*l*r;
  }
  void main(void) {
    // different noises are be used to create fire layers (red in the outside, yellow in the center, blue in in the inside)
            
    vec4 noiseCol1 = texture2D( noiseMap, vUv * vec2(2., 2.) + vec2(.0, -time * 3.));
    vec4 noiseCol2 = texture2D( noiseMap, vUv * vec2(3., 1.) + vec2(.0, -time));
    vec4 noiseCol3 = texture2D( noiseMap, vUv * vec2(1., 1.) + vec2(.0, -time*1.5));
    
    
    // Flames "holes" to avoid a fully filled shape
    float flameHoles = noiseCol3.r * noiseCol3.g; // combine 2 noises
    flameHoles += pow( 1. - vUv.y, 2.); // filling the bottom part, the holes should be more pronouced at the top
    flameHoles = smoothstep(.30,.6, flameHoles); // adding contrast 
   
    // create main layers of the flame, red in the outside, yellow at the center, white in the inside.
    
    float red = noiseCol1.r + noiseCol1.g * .5 + noiseCol1.b * .25; // outside
    float green  = noiseCol1.r * makeBorders(vUv, .8, .4, .1, .6, .1); // center
    float blue = noiseCol1.r * makeBorders(vUv, .6, .5, .1, .5, .1); // inside
    
    // once combined red and green will look yellow. Red, green and blue combined will look white.
    vec4 flame = vec4(red, green, blue, 1.);
  
    // adding details in the flame
    flame.r += (noiseCol2.r * noiseCol2.g * noiseCol2.b) * details;
    flame.g += (noiseCol2.r * noiseCol2.g * noiseCol2.b) * details;
    flame.b += (noiseCol2.r * noiseCol2.g * noiseCol2.b) * details;
  
    // stylise = flatten the colors
    vec3 stylisedFlame = vec3(0.);
    stylisedFlame.r = step(stylizeThreshold, flame.r);
    stylisedFlame.g = step(stylizeThreshold, flame.g);
    stylisedFlame.b = step(stylizeThreshold, flame.b);  
    flame.rgb = mix(flame.rgb, stylisedFlame, stylizeRatio);
    
    // blur borders, apply opacity and holes
    flame.rgb *= makeBorders(vUv, .7, .3, .4, .7, .25) * opacity * flameHoles;

    // grayscale
    if (grayscale){
      float flameValue = dot(flame.rgb, vec3(0.2, 0.3, 0.2));
      flame = vec4(flameValue, flameValue, flameValue, 1.);
    }
    
    gl_FragColor = vec4(flame.rgb, 1.);
  }
</script>

<script type="x-shader/x-fragment" id="ashesFrag">
  uniform sampler2D noiseMap;
  uniform float time;
  varying vec2 vUv;
  
  void main(void) {
            
    vec4 noiseCol1 = texture2D( noiseMap, vUv * 2.2 + vec2(time*.1, -time*.9));
    vec4 noiseCol2 = texture2D( noiseMap, vUv * 3. + vec2(.0, -time*1.6));
    
    float ashes = 1. - (noiseCol1.r * noiseCol2.g * noiseCol2.b );
    ashes += pow(vUv.y, 2.);
    ashes = smoothstep(.65,.75, ashes);
    
    gl_FragColor = vec4(ashes, ashes, ashes, 1.0);
 
  }
</script>
  <script type="importmap">
{
  "imports": {
    "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
    "OrbitControls": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/controls/OrbitControls.js",
    "GLTFLoader": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/loaders/GLTFLoader.js",
    "EffectComposer": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/postprocessing/EffectComposer.js",
    "RenderPass": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/postprocessing/RenderPass.js",
    "UnrealBloomPass": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/postprocessing/UnrealBloomPass.js",
    "OutputPass": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/postprocessing/OutputPass.js",
    "GUI": "//repo.bfw.wiki/bfwrepo/js/lil-gui.esm.js"
  }
}
</script>
      <script type="module">
import * as THREE from "three";
import { OrbitControls } from "OrbitControls";
import { GLTFLoader } from "GLTFLoader";

import { EffectComposer } from "EffectComposer";
import { RenderPass } from "RenderPass";
import { UnrealBloomPass } from "UnrealBloomPass";
import { OutputPass } from "OutputPass";

import GUI from "GUI";

document.addEventListener("DOMContentLoaded", () => new App());

class App {
  constructor() {
    this.winWidth = window.innerWidth;
    this.winHeight = window.innerHeight;
    this.gltfFile = "//repo.bfw.wiki/bfwrepo/threemodel/fireplace9.glb";
    this.noiseFile = "//repo.bfw.wiki/bfwrepo/image/6114547459a9c.png";
    this.loadAssets();
  }

  loadModel() {
    const loaderModel = new GLTFLoader();
    return new Promise(resolve => {
      loaderModel.load(this.gltfFile, gltf => {
        resolve(gltf.scene);
      });
    });
  }

  loadNoise() {
    const textureLoader = new THREE.TextureLoader().........完整代码请登录后点击上方下载按钮下载查看