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

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

代码语言：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 styli.........完整代码请登录后点击上方下载按钮下载查看