three实现音频三维液态噪点可视化动画代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现音频三维液态噪点可视化动画代码，可调节参数。

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Noise - Audio Reactive</title>
    <style>
        @import "https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Sora:wght@400;500;600&display=swap";
        :root {
            --bg-0: #171c25;
            --bg-1: #1b212b;
            --bg-2: #212936;
            --ui-main-color: #3a3b42;
            --surface: color-mix(in srgb, var(--ui-main-color) 82%, #0f1621);
            --surface-hi: color-mix(in srgb, var(--ui-main-color) 90%, #ffffff);
            --surface-lo: color-mix(in srgb, var(--ui-main-color) 66%, #0f1621);
            --line: rgba(138, 157, 188, .16);
            --line-strong: rgba(154, 173, 205, .24);
            --text: #d5deeb;
            --folder-title-color: #d2dbe9;
            --muted: #8692a8;
            --accent: #a8d2ff;
            --slider-fill: #a8d2ff;
            --ui-scale: 1;
            --radius-panel: clamp(14px, calc(22px * var(--ui-bevel-strength)), 34px);
            --radius-button: clamp(8px, calc(13px * var(--ui-bevel-strength)), 22px);
            --elev-x: 8px;
            --elev-y: 8px;
            --elev-blur: 16px;
            --elev-alpha: .58;
            --hint-center-x: 50%
        }

        * { box-sizing: border-box }
        html, body, #app { width: 100%; height: 100%; margin: 0 }
        body {
            overflow: hidden;
            font-family: Sora, Segoe UI, sans-serif;
            color: var(--text);
            background: radial-gradient(120% 120% at 20% 12%, rgba(255,255,255,.05), transparent 44%),
                        radial-gradient(130% 130% at 84% 88%, rgba(101,132,185,.1), transparent 48%),
                        linear-gradient(155deg, var(--bg-0), var(--bg-1) 52%, var(--bg-2))
        }

        .app-shell { position: relative; width: 100%; height: 100% }
        .app-shell:before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
            background-size: 24px 24px;
            opacity: .34
        }

        .viewport { position: absolute; inset: 0; z-index: 1 }
        .viewport-canvas { display: block; width: 100%; height: 100%; outline: none; }

        .overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 1rem
        }

        .panel-dock {
            --ui-hide-btn-size: clamp(2.51rem, calc(2.84rem * var(--ui-scale)), 3.19rem);
            position: relative;
            width: fit-content;
            pointer-events: none;
        }

        .panel-dock .panel, .panel-dock .ui-visibility-btn { pointer-events: auto }

        .panel {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 0;
            width: min(calc((470px * var(--ui-width-scale)) / var(--ui-scale)), 95vw);
            max-height: calc((100vh - 2rem) / var(--ui-scale));
            overflow-x: hidden;
            overflow-y: auto;
            pointer-events: auto;
            transform-origin: top left;
            transform: scale(var(--ui-scale));
            border-radius: var(--radius-panel);
            border: 1px solid var(--line);
            background: linear-gradient(165deg, var(--surface-hi), var(--surface));
            box-shadow: calc(var(--elev-x) * 2) calc(var(--elev-y) * 2) calc(var(--elev-blur) * 2) rgba(8,12,18,var(--elev-alpha)),
                        -12px -12px 28px #ffffff0a,
                        inset 1px 1px #ffffff14,
                        inset -1px -1px #00000061;
            padding: 0 .94rem 0;
            animation: panel-in .46s ease-out both;
        }

        .panel-dock[data-ui-hidden="true"] .panel {
            transform: translate(calc(-100% - 1.1rem)) scale(var(--ui-scale));
            opacity: .95;
            pointer-events: none
        }

        .ui-visibility-btn {
            position: absolute;
            top: clamp(.7rem, calc(.84rem * var(--ui-scale)), 1.14rem);
            left: clamp(.28rem, calc(.36rem * var(--ui-scale)), .58rem);
            width: var(--ui-hide-btn-size);
            min-height: var(--ui-hide-btn-size);
            height: var(--ui-hide-btn-size);
            padding: 0;
            border-radius: var(--radius-button);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 8;
            .........完整代码请登录后点击上方下载按钮下载查看