three实现实时麦克风声音驱动三维空间粒子动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：three实现实时麦克风声音驱动三维空间粒子动画效果代码

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

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

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

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
body { 
   font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
    margin: 0; 
    overflow: hidden; 
}
.hide{
  display:none;
}
#info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  background-color:#111;
  padding: 16px 24px 16px;
    color: #ccc;
  border-radius:4px;
   
    z-index: 100;
}

.debug-panel {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(0,0,0,0.7);
    padding: 15px;
    border-radius: 5px;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    z-index: 1000;
}

.debug-item {
    margin: 5px 0;
    display: flex;
    align-content:left;
    gap: 10px;
}

.value {
    color: #b0a;
  text-align:left;
}
</style>

  
  
  
</head>

<body translate="no">
  <button id="info">Click to use audio</button>
<div class="debug-panel">
  <div class="debug-item">
    Low Freq:
    <span class="value" id="lowFreq">0</span>
  </div>
  <div class="debug-item">
    Mid Freq:
    <span class="value" id="midFreq">0</span>
  </div>
  <div class="debug-item">
    High Freq:
    <span class="value" id="highFreq">0</span>
  </div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>

<script id="vertexShader" type="x-shader/x-vertex">
  uniform float uTime;
    uniform float uAudioLow;
    uniform float uAudioMid;
    uniform float uAudioHigh;
    
    varying vec3 vColor;
    varying float vAudioMid;

    // Basic noise helper functions
    vec3 mod289(vec3 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
    }
    
    vec4 mod289(vec4 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
    }
    
    vec4 permute(vec4 x) {
        return mod289(((x * 34.0) + 1.0) * x);
    }
    
    vec4 taylorInvSqrt(vec4 r) {
        return 1.79284291400159 - 0.85373472095314 * r;
    }

    // Simplex noise implementation
    float snoise(vec3 v) {
        const vec2 C = vec2(1.0/6.0, 1.0/3.0);
        const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);

        vec3 i  = floor(v + dot(v, C.yyy));
        vec3 x0 = v - i + dot(i, C.xxx);

        vec3 g = step(x0.yzx, x0.xyz);
        vec3 l = 1.0 - g;
        vec3 i1 = min(g.xyz, l.zxy);
        vec3 i2 = max(g.xyz, l.zxy);

        vec3 x1 = x0 - i1 + C.xxx;
        vec3 x2 = x0 - i2 + C.yyy;
        vec3 x3 = x0 - D.yyy;

        i = mod289(i);
        vec4 p = permute(permute(permute(
                i.z + vec4(0.0, i1.z, i2.z, 1.0))
                + i.y + vec4(0.0, i1.y, i2.y, 1.0))
                + i.x + vec4(0.0, i1.x, i2.x, 1.0));

        float n_ = 0.142857142857;
        vec3 ns = n_ * D.wyz - D.xzx;

        vec4 j = p - 49.0 * floor(p * ns.z * ns.z);

        vec4 x_ = floor(j * ns.z);
        vec4 y_ = floor(j - 7.0 * x_);

        vec4 x = x_ *ns.x + ns.yyyy;
        vec4 y = y_ *ns.x + ns.yyyy;
        vec4 h = 1.0 - abs(x) - abs(y);

        vec4 b0 = vec4(x.xy, y.xy);
        vec4 b1 = vec4(x.zw, y.zw);

        vec4 s0 = floor(b0)*2.0 + 1.0;
        vec4 s1 = floor(b1)*2.0 + 1.0;
        vec4 sh = -step(h, vec4(0.0));

        vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
        vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;

        vec3 p0 = vec3(a0.xy, h.x);
        vec3 p1 = vec3(a0.zw, h.y);
        vec3 p2 = vec3(a1.xy, h.z);
        vec3 p3 = vec3(a1.zw, h.w);

        vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
        p0 *= norm.x;
        p1 *= norm.y;
        p2 *= norm.z;
        p3 *= norm.w;

        vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
        m = m * m;
        return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
    }

    // Vector noise function
    vec3 snoiseVec3(vec3 x) {
        float s = snoise(vec3(x));
        float s1 = snoise(vec3(x.y - 19.1, x.z + 33.4, x.x + 47.2));
        float s2 = snoise(vec3(x.z + 74.2, x.x - 124.5, x.y + 99.4));
        return vec3(s, s1, s2);
    }

    // Curl noise implementation
    vec3 curlNoise(vec3 p) {
        const float e = .1;
        vec3 dx = vec3(e, 0.0, 0.0);
        vec3 dy = vec3(0.0, e, 0.0);
        vec3 dz = vec3(0.0, 0.0, e);

        vec3 p_x0 = snoiseVec3(p - dx);
        vec3 p_x1 = snoiseVec3(p + dx);
        vec3 p_y0 = snoiseVec3(p - dy);
        vec3 p_y1 = snoiseVec3(p + dy);
        vec3 p_z0 = snoiseVec3(p - dz);
        vec3 p_z1 = snoiseVec3(p + dz);

        float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
        float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
        float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;

        return normalize(vec3(x, y, z));
    }
    
    void main() {
        vec3 curl = curlNoise(position * 0.5 + uTime * 0.1);
        float noise = snoise(position * 0.5 + uTime * 0.2);
        float chaos = uAudioLow + uAudioMid + uAudioHigh;
    vec3 randomOffset = vec3(
        snoise(position + vec3(uTime * 2.0, 0.0, 0.0)),
        snoise(position + vec3(0.0, uTime * 2.0, 0.0)),
        snoise(position + vec3(0.0, 0.0, uTime * 2.0))
    );
        float expansion = 1.0 + uAudioLow * 0.5;
        vec3 basePosition = position * expansion;
        
        vec3 orderedMovement = curl * (0.3 + uAudioMid * 2.0) + normal * (noise * 0.2);
    vec3 chaoticMovement = randomOffset * chaos * 2.0;
    
    vec3 displaced = basePosition + mix(orderedMovement, chaoticMovement, chaos * 0.7);
    displaced += curl * sin(uTime * 10.0) * uAudioHigh * 0.2;
    
        
        vec3 baseColor = vec3(
            0.5 + 0.5 * sin( curl.y + 2.0),
          0.5 + 0.5 * sin(uTi.........完整代码请登录后点击上方下载按钮下载查看