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

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

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