Three.js 银河星系效果 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt 复制代码

使用 Three.js 创建银河星系效果，粒子围绕中心螺旋分布，使用 GUI 控制参数。

🖼️ 效果预览

🎮 案例演示

立即体验

效果描述

这是一个展示如何创建银河星系效果的示例，粒子围绕中心螺旋分布。

效果特性

银河星系：创建 250000 个粒子
螺旋分布：粒子围绕中心螺旋分布
分支结构：粒子分为多个分支
颜色渐变：粒子颜色从内到外渐变
GUI 控制：使用 GUI 控制参数
纹理贴图：使用星形纹理

核心参数

参数	值	说明
粒子数量	250000	粒子总数
分支数量	6	星系分支数
分支半径	5	分支半径
旋转角度	0.2	旋转角度
内颜色	#ff812e	内部颜色
外颜色	#a668ff	外部颜色

核心代码解析

生成银河

javascript 复制代码

const generateGalaxy = () => {
    if (points) {
        geometry.dispose();
        material.dispose();
        scene.remove(points);
    }

    const positions = new Float32Array(params.particleCount * 3);
    const colors = new Float32Array(params.particleCount * 3);
    const innerColor = new THREE.Color(params.innerColor);
    const outerColor = new THREE.Color(params.outerColor);
    
    for (let i = 0; i < params.particleCount; i++) {
        const i3 = i * 3;

        const radius = params.branchRadius * Math.random();
        const branchAngle = ((i % params.branches) / params.branches) * Math.PI * 2;
        const spinAngle = params.spin * radius * Math.PI * 2;

        const randRadius = Math.random() * params.radialRandomness * radius;
        const { x: randX, y: randY, z: randZ } = getRandomPolarCoordinate(randRadius);

        positions[i3] = radius * Math.cos(branchAngle + spinAngle) + randX;
        positions[i3 + 1] = randY;
        positions[i3 + 2] = radius * Math.sin(branchAngle + spinAngle) + randZ;

        const mixedColor = innerColor.clone().lerp(outerColor, radius / params.branchRadius);
        colors[i3] = mixedColor.r;
        colors[i3 + 1] = mixedColor.g;
        colors[i3 + 2] = mixedColor.b;
    }

    material = new THREE.PointsMaterial({
        size: params.particleSize,
        sizeAttenuation: true,
        depthWrite: false,
        blending: THREE.AdditiveBlending,
        vertexColors: true,
        map: particleTexture,
        transparent: true,
    });

    geometry = new THREE.BufferGeometry();
    geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
    geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

    points = new THREE.Points(geometry, material);
    scene.add(points);
};

随机极坐标

javascript 复制代码

const getRandomPolarCoordinate = (radius) => {
    const theta = Math.random() * Math.PI * 2;
    const phi = Math.random() * Math.PI * 2;
    const x = radius * Math.sin(theta) * Math.cos(phi);
    const y = radius * Math.sin(theta) * Math.sin(phi);
    const z = radius * Math.cos(theta);
    return { x, y, z };
}

技术亮点

银河星系：创建银河星系效果
螺旋分布：粒子围绕中心螺旋分布
分支结构：粒子分为多个分支
颜色渐变：粒子颜色从内到外渐变
GUI 控制：使用 GUI 控制参数

调试技巧

粒子数量：调整粒子数量测试性能
分支数量：调整分支数量改变结构
旋转角度：调整旋转角度改变螺旋
颜色渐变：调整颜色渐变参数
随机性：调整随机性参数

扩展方向

多层银河：创建多层银河效果
不同形状：使用不同的星系形状
动画效果：添加旋转动画
交互控制：添加更多交互控制
复杂结构：创建更复杂的星系结构

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。