gl-matrix实现可调配置webgl粒子特效动画代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：gl-matrix实现可调配置webgl粒子特效动画代码

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

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


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

    <style>
        body { 
            margin: 0; 
            overflow: hidden; 
            background: linear-gradient(to bottom, #000000, #0a0a2a);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Arial', sans-serif;
            color: #fff;
        }
        canvas { 
            display: block; 
            width: 800px;
            height: 800px;
            cursor: pointer;
            box-shadow: 0 0 50px rgba(0, 100, 255, 0.3);
        }
        .controls {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 250px;
            background: rgba(0, 0, 20, 0.7);
            padding: 15px;
            border-radius: 8px;
            z-index: 100;
            max-height: 90vh;
            overflow-y: auto;
        }
        .controls h3 {
            margin-top: 15px;
            margin-bottom: 5px;
            border-bottom: 1px solid rgba(100, 150, 255, 0.5);
            padding-bottom: 5px;
        }
        .control-group {
            margin-bottom: 15px;
        }
        .control-item {
            margin-bottom: 8px;
        }
        label {
            display: block;
            margin-bottom: 3px;
            font-size: 12px;
        }
        input[type="range"] {
            width: 100%;
        }
        input[type="color"] {
            width: 50px;
            height: 25px;
            border: none;
            cursor: pointer;
        }
        .color-picker {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .color-value {
            font-size: 11px;
            color: #aaa;
        }
        button {
            background: rgba(30, 30, 100, 0.6);
            border: 1px solid rgba(100, 150, 255, 0.5);
            padding: 8px 15px;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 1px;
            margin: 5px 3px;
        }
        button:hover {
            background: rgba(70, 70, 200, 0.7);
            transform: translateY(-2px);
        }
        .buttons-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>
    
    <div class="controls">
        <h3>Effets</h3>
        <div class="buttons-container">
            <button id="btnGravity">Gravité</button>
            <button id="btnExplosion">Explosion</button>
            <button id="btnImplosion">Implosion</button>
            <button id="btnVortex">Vortex</button>
            <button id="btnNeon">Néon</button>
            <button id="btnReset">Reset</button>
        </div>
        
        <h3>Particules</h3>
        <div class="control-group">
            <div class="control-item">
                <label for="particleSize">Taille des particules</label>
                <input type="range" id="particleSize" min="5" max="40" value="15" step="1">
            </div>
            <div class="control-item">
                <label for="particleDensity">Densité des particules</label>
                <input type="range" id="particleDensity" min="10" max="35" value="25" step="1">
            </div>
        </div>
        
        <h3>Couleurs</h3>
        <div class="control-group">
            <div class="control-item color-picker">
                <label>Couleur primaire</label>
                <input type="color" id="primaryColor" value="#3366ff">
                <span id="primaryColorValue" class="color-value">#3366ff</span>
            </div>
            <div class="control-item color-picker">
                <label>Couleur secondaire</label>
                <input type="color" id="secondaryColor" value="#ff3366">
                <span id="secondaryColorValue" class="color-value">#ff3366</span>
            </div>
            <div class="control-item color-picker">
                <label>Couleur d'accent</label>
                <input type="color" id="accentColor" value="#33ff66">
                <span id="accentColorValue" class="color-value">#33ff66</span>
            </div>
        </div>
        
        <h3>Animation</h3>
        <div class="control-group">
            <div class="control-item">
                <label for="rotationSpeed">Vitesse de rotation</label>
                <input type="range" id="rotationSpeed" min="0.1" max="3" value="1" step="0.1">
            </div>
            <div class="control-item">
                <label for="pulseSpeed">Vitesse de pulsation</label>
                <input type="range" id="pulseSpeed" min="0.5" max="5" value="1.5" step="0.1">
            </div>
            <div class="control-item">
                <label for="pulseIntensity">Intensité de pulsation</label>
                <input type="range" id="pulseIntensity" min="0.5" max="3" value="1.2" step="0.1">
            </div>
        </div>
        
        <h3>Effets visuels</h3>
        <div class="control-group">
            <div class="control-item">
                <label for="glowIntensity">Intensité de lueur</label>
                <input type="range" id="glowIntensity" min="0" max="3" value="1.2" step="0.1">
            </div>
            <div class="control-item">
                <label for="colorSaturation">Saturation des couleurs</label>
                <input type="range" id="colorSaturation" min="0.5" max="3" value="1.5" step="0.1">
            </div>
            <div class="control-item">
                <label for="colorIntensity">Intensité des couleurs</label>
                <input type="range" id="colorIntensity" min="0.5" max="3" value="1.5" step="0.1">
            </div>
        </div>
    </div>

    <script type="x-shader/x-vertex" id="vertexShader">
        attribute vec4 aVertexPosition;
        attribute vec3 aVertexColor;
        attribute float aPointOffset;
        attribute vec3 aOriginalPosition;
        attribute float aPointSize;
        
        uniform mat4 uModelViewMatrix;
        uniform mat4 uProjectionMatrix;
        uniform float uTime;
        uniform float uBasePointSize;
        uniform bool uGravityMode;
        uniform float uGravityTime;
        uniform bool uExp.........完整代码请登录后点击上方下载按钮下载查看