Generates a 3D flight tunnel w…

# Three.js 3D粒子隧道 Demo

一、核心实现思路

• 用 5000 个粒子 沿 Z 轴分布成长隧道
• 粒子颜色沿 Z 轴从蓝渐变到紫
• 鼠标滚轮控制速度（滚轮向下加速）
• 相机持续向前移动，粒子循环复用制造“无限隧道”效果

二、完整代码（可直接保存为 index.html 打开）

```html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>粒子隧道</title>

<style>

body { margin: 0; overflow: hidden; background: #000; }

</style>

</head>

<body>

<script type="importmap">

{ "imports": { "three": "https://unpkg.com/[email protected]/build/three.module.js" } }

</script>

<script type="module">

import * as THREE from 'three';

const scene = new THREE.Scene();

scene.fog = new THREE.Fog(0x000000, 50, 300);

const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(innerWidth, innerHeight);

document.body.appendChild(renderer.domElement);

const COUNT = 5000, LENGTH = 400;

const positions = new Float32Array(COUNT*3);

const colors = new Float32Array(COUNT*3);

const cBlue = new THREE.Color(0x2266ff);

const cPurple = new THREE.Color(0xaa22ff);

for (let i = 0; i < COUNT; i++) {

const angle = Math.random() * Math.PI * 2;

const radius = 20 + Math.random() * 30;

positions[i*3] = Math.cos(angle) * radius;

positions[i*3+1] = Math.sin(angle) * radius;

positions[i*3+2] = Math.random() * LENGTH;

const c = cBlue.clone().lerp(cPurple, positions[i*3+2] / LENGTH);

colors[i*3] = c.r; colors[i*3+1] = c.g; colors[i*3+2] = c.b;

}

const geo = new THREE.BufferGeometry();

geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));

geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const mat =