three+webgl实现三维立体熔岩灯代码-html代码-BFW代码库

three+webgl实现三维立体熔岩灯代码

代码语言：html

所属分类：三维

代码描述：three+webgl实现三维立体熔岩灯代码

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

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

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

  
  
  
<style>
body {
  overflow: hidden;
  margin: 0;
}
</style>


  
</head>

<body translate="no">
  <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.182.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.182.0/examples/jsm/"
    }
  }
</script>
<script>
  let sdf = {
    pars_vertex:`
      varying vec3 vPosition;
      varying mat4 vProjMat;
      varying mat4 vModelViewMat;
      varying mat3 vNormalMatrix;
    `,
    vertex: `
      vPosition = position;
      vProjMat = projectionMatrix;
      vModelViewMat = modelViewMatrix;
      vNormalMatrix = normalMatrix;
    `,
    pars_fragment:`
      uniform float time;
      uniform vec3 camPos;
    
      varying vec3 vPosition;
      varying mat4 vProjMat;
      varying mat4 vModelViewMat;
      varying mat3 vNormalMatrix;
      
      #define MAX_STEPS 250
      #define MAX_DIST 100.
      #define SURF_DIST 1e-4

      mat2 Rot(float a) {
        float s = sin(a), c = cos(a);
        return mat2(c, -s, s, c);
      }

      vec2 opMin(vec2 a, vec2 b){
        return a.x < b.x ? a : b;
      }
      
      #<GetDist>
      
      vec2 RayMarch(vec3 ro, vec3 rd) {
        vec2 dO=vec2(0.);
        for(int i = 0; i < MAX_STEPS; i++) {
          vec3 p = ro + rd*dO.x;
          vec2 dS = GetDist(p);
          dO.x += dS.x;
          dO.y = dS.y;
          if(dO.x>MAX_DIST || dO.x<SURF_DIST) break;
        }
        return dO;
      }

      vec3 GetNormal(vec3 p) {
        float d = GetDist(p).x;
        vec2 e = vec2(SURF_DIST, 0.........完整代码请登录后点击上方下载按钮下载查看