Three.js 银河星系效果

提示词

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

效果描述

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

效果特性

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

核心参数

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

核心代码解析

生成银河

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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
1
2
3
4
5
6
7
8
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 };
}

技术亮点

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

调试技巧

  1. 粒子数量:调整粒子数量测试性能
  2. 分支数量:调整分支数量改变结构
  3. 旋转角度:调整旋转角度改变螺旋
  4. 颜色渐变:调整颜色渐变参数
  5. 随机性:调整随机性参数

扩展方向

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

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