three实现三维粒子鼠标交互动画代码-html代码-BFW代码库

three实现三维粒子鼠标交互动画代码

代码语言：html

所属分类：粒子

代码描述：three实现三维粒子鼠标交互动画代码，可调参数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPGPU Curl Noise Flowfield Particles</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000a14;
        }
        canvas {
            display: block;
        }
    </style>
    <!-- Import maps for Three.js -->
    <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>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';
        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
        import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
        import GUI from 'https://unpkg.com/lil-gui@0.19.1/dist/lil-gui.esm.min.js';

        // --- Config ---
        const config = {
            particleCount: 128, // 128x128 = 16384 Particles
            scale: 2.5,
            strength: 1.0,
            speed: 0.5,
            curlSpeed: 0.3,
            mouseRadius: 0.25,
            mouseStrength: 2.5,
            particleSize: 8.0,
            paletteA: [0.48, 0.79, 0.88],
            paletteB: [0.60, 0.40, 1.00],
            paletteC: [1.30, 1.90, 1.50],
            paletteD: [0.10, 0.30, 0.50]
        };

        // --- Main Setup ---
        const canvas = document.createElement('canvas');
        document.body.appendChild(canvas);

        const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true, powerPreference: "high-performance" });
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(new THREE.Color(0, 10/255, 20/255), 1);

        const scene = new THREE.Scene();
        
        const camera = new TH.........完整代码请登录后点击上方下载按钮下载查看