three实现无限光轨高速公路延迟摄影车水马龙艺术动画代码-html代码-BFW代码库

three实现无限光轨高速公路延迟摄影车水马龙艺术动画代码

代码语言：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>无限光轨高速公路 - Three.js</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #000;
        }
        #lights {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
        }
        /* 交互提示 */
        #instructions {
            position: absolute;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.6);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            font-size: 14px;
            pointer-events: none;
            user-select: none;
            text-align: center;
            letter-spacing: 2px;
        }
    </style>
</head>
<body>

    <div id="lights"></div>
    <div id="instructions">按住鼠标左键或触摸屏幕加速</div>

    <!-- 导入 Three.js CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- 导入 Postprocessing 库 CDN 用于辉光效果 (Bloom) -->
    <script src="https://cdn.jsdelivr.net/npm/postprocessing@6.24.1/build/postprocessing.js"></script>

    <script>
        // 默认配置选项
        const N = {
            onSpeedUp: () => {},
            onSlowDown: () => {},
            distortion: "turbulentDistortion", // 畸变效果类型
            length: 400,
            roadWidth: 10,
            islandWidth: 2,
            lanesPerRoad: 4,
            fov: 90,
            fovSpeedUp: 150,
            speedUp: 2,
            carLightsFade: .4,
            totalSideLightSticks: 20,
            lightPairsPerRoadWay: 40,
            shoulderLinesWidthPercentage: .05,
            brokenLinesWidthPercentage: .1,
            brokenLinesLengthPercentage: .5,
            lightStickWidth: [.12, .5],
            lightStickHeight: [1.3, 1.7],
            movingAwaySpeed: [60, 80],
            movingCloserSpeed: [-120, -160],
            carLightsLength: [400 * .03, 400 * .2],
            carLightsRadius: [.05, .14],
            carWidthPercentage: [.3, .5],
            carShiftX: [-.8, .8],
            carFloorSeparation: [0, 5],
            colors: {
                roadColor: 0x080808,
                islandColor: 0x0a0a0a,
                background: 0,
                shoulderLines: 0xffffff,
                brokenLines: 0xffffff,
                leftCars: [0xd8383f, 0x675102, 0xc24e2c],
                rightCars: [0x03b3c3, 0x0e5fbb, 0x32450d],
                sticks: 0x03b3c3
            }
        };

        // 各种数学计算辅助工具
        const g = o => Array.isArray(o) ? Math.random() * (o[1] - o[0]) + o[0] : Math.random() * o;
        const U = o => Array.isArray(o) ? o[Math.floor(Math.random() * o.length)] : o;
        function O(o, e, t = .1, s = .001) {
            let i = (e - o) * t;
            return Math.abs(i) < s && (i = e - o), i;
        }
        const P = o => Math.sin(o) * .5 + .5;

        // 预设的各类型畸变配置 (Q)
        const D = { uFreq: { value: new THREE.Vector3(3, 6, 10) }, uAmp: { value: new THREE.Vector3(30, 30, 20) } };
        const T = { uFreq: { value: new THREE.Vector2(5, 2) }, uAmp: { value: new THREE.Vector2(25, 15) } };
        const k = { uFreq: { value: new THREE.Vector2(2, 3) }, uAmp: { value: new THREE.Vector2(35, 10) } };
        const S = { uFreq: { value: new THREE.Vector4(4, 8, 8, 1) }, uAmp: { value: new THREE.Vector4(25, 5, 10, 10) } };
        const b = { uFreq: { value: new THREE.Vector4(4, 8), uAmp: { value: new THREE.Vector4(10, 20), uPowY: { value: new THREE.Vector2(20, 2) } } } };

        const Q = {
            mountainDistortion: {
                uniforms: D,
                getDistortion: `
               .........完整代码请登录后点击上方下载按钮下载查看