three实现三维空气动力学流体模拟动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：three实现三维空气动力学流体模拟动画效果代码，记得点击smoke mode
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Airflow Shaper - Three.js</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #000; font-family: 'Segoe UI', sans-serif; }
        canvas { display: block; width: 100vw; height: 100vh; }
        
        /* UI Panel Styles */
        #ui-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 300px;
            background: rgba(20, 20, 25, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: #eee;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            max-height: 90vh;
            user-select: none;
            transition: width 0.3s, opacity 0.3s;
            --ui-size-scale: 1;
        }

        #ui-panel.is-collapsed {
            width: 40px;
            height: 40px;
            overflow: hidden;
            background: transparent;
            border: none;
        }

        /* Handles for dragging */
        .panel-handle {
            height: 24px;
            background: rgba(255, 255, 255, 0.05);
            cursor: move;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .panel-handle::after {
            content: '';
            width: 40px;
            height: 4px;
            background: rgba(255,255,255,0.2);
            border-radius: 2px;
        }
        #ui-handle { border-top-left-radius: 8px; border-top-right-radius: 8px; }
        #ui-handle-bottom { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; cursor: move; }

        /* Scrollable Content */
        .panel-content {
            flex: 1;
            overflow-y: auto;
            padding: 10px 16px;
        }
        #ui-panel.is-collapsed .panel-content,
        #ui-panel.is-collapsed .panel-handle { display: none; }

        /* Toggle Button */
        #collapse-toggle {
            position: absolute;
            top: 0; left: 0;
            width: 40px; height: 40px;
            background: rgba(40,40,50,0.8);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        #collapse-toggle:hover { background: #445; }

        /* Sections */
        .panel-section { margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
        .panel-section:last-child { border-bottom: none; }
        .panel-heading {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #88a;
            margin-bottom: 8px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
        }
        .panel-heading::after { content: '▼'; font-size: 10px; }
        .panel-section.is-collapsed .control-group { display: none; }
        .panel-section.is-collapsed .panel-heading::after { content: '◀'; }

        /* Controls */
        .control-row { display: flex; gap: 8px; margin-bottom: 8px; }
        button {
            flex: 1;
            background: #333642;
            border: 1px solid #4a4d5a;
            color: #ddd;
            padding: 6px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: background 0.2s;
        }
        button:hover { background: #44495e; }
        button:active { background: #555b75; }

        .control-group { margin-bottom: 12px; }
        label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; color: #ccc; }
        
        /* Custom Range Slider */
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 14px; width: 14px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            margin-top: -5px;
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 4px;
            background: #444;
            border-radius: 2px;
        }
        /* Color input */
        input[type="color"] {
            border: none; width: 100%; height: 24px; padding: 0; cursor: pointer; background: none;
        }

        /* Checkbox */
        .checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 5px; }
    </style>
    
    <!-- Import Maps for Three.js via CDN -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
            }
        }
    </script>
</head>
<body>

    <canvas id="app-canvas"></canvas>

    <!-- UI Structure Recreated from Logic -->
    <div id="ui-panel">
        <button id="collapse-toggle" title="Toggle UI">≡</button>
        <div id="ui-handle" class="panel-handle"></div>
        
        <div class="panel-content">
            <!-- Simulation Controls -->
            <div class="panel-section">
                <div class="panel-heading" aria-expanded="true">Simulation</div>
                <div class="control-group">
                    <div class="control-row">
                        <button id="play-sim">Play</button>
                        <button id="pause-sim">Pause</button>
                        <button id="restart-sim">Restart</button>
                    </div>
                </div>
            </div>

            <!-- Flow Settings -->
            <div class="panel-section">
                <div class="panel-heading" aria-expanded="true">Flow Params</div>
                <div class="control-group">
                    <label>Speed <span id="flow-speed-value"></span></label>
                    <input type="range" id="flow-speed" min="0.1" max="10" step="0.1">
                </div>
                <div class="control-group">
                    <label>Length <span id="flow-length-value"></span></label>
                    <input type="range" id="flow-length" min="1" max="15" step="0.1">
                </div>
                <div class="control-group">
                    <label>Turbulence <span id="turbulence-value"></span></label>
                    <input type="range" id="turbulence-strength" min="0" max="2" step="0.01">
                </div>
                <div class="control-group">
                    <label>Recovery <span id="recovery-length-value"></span></label>
                    <input type="range" id="recovery-length" min="0.1" max="3" step="0.1">
                </div>
                <div class="control-group">
                    <label>Impact Buffer <span id="impact-buffer-value"></span></label>
                    <input type="range" id="impact-buffer" min="0.01" max="0.5" step="0.01">
                </div>
            </div>

            <!-- Emitter Settings -->
            <div class="panel-section">
                <div class="panel-heading" aria-expanded="true">Emitter</div>
                <div class="control-group">
                    <label>Density X <span id="density-x-value"></span></label>
                    <input type="range" id="density-x" min="5" max="50" step="1">
                </div>
                <div class="control-group">
                    <label>Density Y <span id="density-y-value"></span></label>
                    <input type="range" id="density-y" min="5" max="30" step="1">
                </div>
            </div>

            <!-- Visuals -->
            <div class="panel-section">
                <div class="panel-heading" aria-expanded="true">Visuals</div>
                <div class="control-group">
                    <label>Path Color</label>
                    <input type="color" id="path-color">
                </div>
                <div class="control-group">
                    <label>Obstructed Color</label>
                    <input type="color" id="obstructed-color">
                &.........完整代码请登录后点击上方下载按钮下载查看