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, user-scalable=no">
    <title>3D 公路动画 - 夜景灯光秀</title>
    <style>
        :root {
            --bg: #000000;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            background: var(--bg);
            font-family: system-ui, -apple-system, sans-serif;
            touch-action: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
            cursor: pointer;
            position: fixed;
            top: 0;
            left: 0;
        }

        #container {
            width: 100%;
            height: 100%;
            position: relative;
            display: block;
        }

        #container canvas {
            display: block;
        }

        .hint {
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            letter-spacing: 0.08em;
            pointer-events: none;
            z-index: 10;
            transition: opacity 0.8s ease;
            text-align: center;
            text-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
        }

        .hint.fading {
            opacity: 0.25;
        }

        .perf-note {
            position: fixed;
            top: 16px;
            right: 20px;
            color: rgba(255, 255, 255, 0.35);
            font-size: 11px;
            pointer-events: none;
            z-index: 10;
            letter-spacing: 0.05em;
            transition: opacity 0.5s ease;
        }

        @media (max-width: 768px) {
            .hint {
                bottom: 28px;
                font-size: 12px;
            }
            .perf-note {
                top: 10px;
                right: 12px;
                font-size: 10px;
            }
        }
    </style>
</head>
<body>

    <div id="container"></div>
    <div class="hint" id="hint">按住鼠标或触摸屏幕加速</div>
    <div class="perf-note" id="perfNote"></div>

    <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>

    <script type="module">
        import * as THREE from 'three';
        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

        // ==================== 工具函数 ====================
        const nsin = (val) => Math.sin(val) * 0.5 + 0.5;

        function lerpSmooth(current, target, factor = 0.1, threshold = 0.001) {
            let delta = (target - current) * factor;
            if (Math.abs(delta) < threshold) delta = target - current;
            return delta;
        }

        function randRange(val) {
            return Array.isArray(val) ?
                Math.random() * (val[1] - val[0]) + val[0] :
                Math.random() * val;
        }

        function randPick(arr) {
            return Array.isArray(arr) ? arr[Math.floor(Math.random() * arr.length)] : arr;
        }

        // ==================== 默认配置 ====================
        const DEFAULT_CONFIG = {
            distortion: 'turbulentDistortion',
            length: 400,
            roadWidth: 10,
            islandWidth: 2,
            lanesPerRoad: 4,
            fov: 90,
            fovSpeedUp: 150,
            speedUp: 2,
            carLightsFade: 0.4,
            totalSideLightSticks: 20,
            lightPairsPerRoadWay: 40,
            shoulderLinesWidthPercentage: 0.05,
            brokenLinesWidthPercentage: 0.1,
            brokenLinesLengthPercentage: 0.5,
            lightStickWidth: [0.12, 0.5],
            lightStickHeight: [1.3, 1.7],
            movingAwaySpeed: [60, 80],
            movingCloserSpeed: [-120, -160],
            carLightsLength: [400 * 0.03, 400 * 0.2],
            carLightsRadius: [0.05, 0.14],
            carWidthPercentage: [0.3, 0.5],
            carShiftX: [-0.8, 0.8],
            carFloorSeparation: [0, 5],
            colors: {
                roadColor: 0x080808,
                islandColor: 0x0A0A0A,
                background: 0x000000,
                shoulderLines: 0xFFFFFF,
                brokenLines: 0xFFFFFF,
                leftCars: [0xD8583F, 0x6750A2, 0xC247AC],
                rightCars: [0x03B3C3, 0x0E5DA5, 0x324855],
                sticks: 0x03B3C3,
            },
            onSpeedUp: () => {},
         .........完整代码请登录后点击上方下载按钮下载查看