Three.js 着色器打造银河系粒子效果

2026年1月23日 15:46

概述

本文将详细介绍如何使用 Three.js 和自定义着色器来创建一个动态旋转的银河系粒子效果。我们将通过编写顶点着色器和片元着色器来实现旋转的星系动画效果，这能帮助你理解粒子系统的构建原理和着色器的使用方法。

准备工作

首先，我们需要引入必要的 Three.js 库和相关工具：

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap";
import * as dat from "dat.gui";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
import { Color } from "three";
import fragmentShader from "../shader/basic/fragmentShader.glsl";
import vertexShader from "../shader/basic/vertexShader.glsl";

场景初始化

首先，我们需要创建一个基本的 Three.js 场景：

// 初始化场景
const scene = new THREE.Scene();

// 创建透视相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerHeight / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
camera.position.set(0, 0, 5);
scene.add(camera);

// 加入辅助轴，帮助我们查看3维坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

纹理加载

为了创建漂亮的粒子效果，我们需要加载一些纹理图像：

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('textures/particles/10.png');
const texture1 = textureLoader.load('textures/particles/9.png');
const texture2 = textureLoader.load('textures/particles/11.png');

银河系参数配置

为了方便调整效果，我们定义银河系的参数：

// 设置星系的参数
const params = {
  count: 1000,        // 粒子数量
  size: 0.1,          // 粒子大小
  radius: 5,          // 银河系半径
  branches: 4,        // 分支数量
  spin: 0.5,          // 旋转系数
  color: "#ff6030",   // 内部颜色
  outColor: "#1b3984", // 外部颜色
};

// 定义颜色
let galaxyColor = new THREE.Color(params.color);
let outGalaxyColor = new THREE.Color(params.outColor);

生成银河系函数

这是核心函数，用于生成带有旋转动画的银河系粒子：

let geometry = null;
let points = null;
let material;

const generateGalaxy = () => {
  // 如果已经存在这些顶点，那么先释放内存，在删除顶点数据
  if (points !== null) {
    geometry.dispose();
    material.dispose();
    scene.remove(points);
  }

  // 生成顶点几何
  geometry = new THREE.BufferGeometry();
  // 随机生成位置
  const positions = new Float32Array(params.count * 3);
  const colors = new Float32Array(params.count * 3);
  const scales = new Float32Array(params.count);
  // 图案属性
  const imgIndex = new Float32Array(params.count);

  // 循环生成点
  for (let i = 0; i < params.count; i++) {
    const current = i * 3;

    // 计算分支的角度 = (计算当前的点在第几个分支)*(2*Math.PI/多少个分支)
    const branchAngel =
      (i % params.branches) * ((2 * Math.PI) / params.branches);

    const radius = Math.random() * params.radius;
    
    // 随机设置x/y/z偏移值
    const randomX =
      Math.pow(Math.random() * 2 - 1, 3) * 0.5 * (params.radius - radius) * 0.3;
    const randomY =
      Math.pow(Math.random() * 2 - 1, 3) * 0.5 * (params.radius - radius) * 0.3;
    const randomZ =
      Math.pow(Math.random() * 2 - 1, 3) * 0.5 * (params.radius - radius) * 0.3;

    // 设置当前点坐标
    positions[current] = Math.cos(branchAngel) * radius + randomX;
    positions[current + 1] = randomY;
    positions[current + 2] = Math.sin(branchAngel) * radius + randomZ;

    // 颜色渐变处理
    const mixColor = galaxyColor.clone();
    mixColor.lerp(outGalaxyColor, radius / params.radius);

    // 设置颜色
    colors[current] = mixColor.r;
    colors[current + 1] = mixColor.g;
    colors[current + 2] = mixColor.b;

    // 顶点的大小
    scales[current] = Math.random();

    // 根据索引值设置不同的图案
    imgIndex[current] = i % 3;
  }

  geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
  geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
  geometry.setAttribute("aScale", new THREE.BufferAttribute(scales, 1));
  geometry.setAttribute("imgIndex", new THREE.BufferAttribute(imgIndex, 1));

  // 设置点的着色器材质
  material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    transparent: true,
    vertexColors: true,
    blending: THREE.AdditiveBlending,
    depthWrite: false,
    uniforms: {
      uTime: {
        value: 0,
      },
      uTexture: {
        value: texture
      },
      uTexture1: {
        value: texture1
      },
      uTexture2: {
        value: texture2
      },
      uColor: {
        value: galaxyColor
      }
    },
  });

  // 生成点
  points = new THREE.Points(geometry, material);
  scene.add(points);
};

着色器详解

顶点着色器 (Vertex Shader)

顶点着色器负责计算每个粒子的位置和大小：

varying vec2 vUv;

attribute float imgIndex;
attribute float aScale;
varying float vImgIndex;

uniform float uTime;

varying vec3 vColor;

void main(){
    vec4 modelPosition = modelMatrix * vec4( position, 1.0 );
    
    // 获取顶点的角度
    float angle = atan(modelPosition.x,modelPosition.z);
    // 获取顶点到中心的距离
    float distanceToCenter = length(modelPosition.xz);
    // 根据顶点到中心的距离，设置旋转偏移度数
    float angleOffset = 1.0/distanceToCenter*uTime;
    // 目前旋转的度数
    angle+=angleOffset;

    modelPosition.x = cos(angle)*distanceToCenter;
    modelPosition.z = sin(angle)*distanceToCenter;

    vec4 viewPosition = viewMatrix*modelPosition;
    gl_Position =  projectionMatrix * viewPosition;

    // 设置点的大小
    gl_PointSize =200.0/-viewPosition.z*aScale;
    vUv = uv;
    vImgIndex=imgIndex;
    vColor = color;
}

片元着色器 (Fragment Shader)

片元着色器负责计算每个粒子的颜色和透明度：

varying vec2 vUv;

uniform sampler2D uTexture;
uniform sampler2D uTexture1;
uniform sampler2D uTexture2;
varying float vImgIndex;
varying vec3 vColor;

void main(){
    vec4 textureColor;
    if(vImgIndex==0.0){
       textureColor = texture2D(uTexture,gl_PointCoord);
    }else if(vImgIndex==1.0){
       textureColor = texture2D(uTexture1,gl_PointCoord);
    }else{
       textureColor = texture2D(uTexture2,gl_PointCoord);
    }
    
    gl_FragColor = vec4(vColor,textureColor.r) ;
}

动画与渲染

最后，我们需要在渲染循环中更新时间参数，以实现旋转动画效果：

const clock = new THREE.Clock();

function animate(t) {
  const elapsedTime = clock.getElapsedTime();
  material.uniforms.uTime.value = elapsedTime;
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

渲染器和控制器设置

设置渲染器和控制器以获得更好的交互体验：

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;

// 设置渲染尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);

// 监听屏幕大小改变的变化，设置渲染的尺寸
window.addEventListener("resize", () => {
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比例
  renderer.setPixelRatio(window.devicePixelRatio);
});

// 将渲染器添加到body
document.body.appendChild(renderer.domElement);

// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼
controls.enableDamping = true;

总结

通过这个项目，我们学习了如何使用 Three.js 创建动态的银河系粒子效果。关键在于：

使用 BufferGeometry 创建大量的粒子顶点
通过自定义着色器实现旋转动画效果
使用不同的纹理为粒子添加多样化的外观
实现颜色渐变以增强视觉效果

这种技术可以应用于各种场景，如星空、火焰、烟雾、雨雪等自然现象的模拟，或者作为游戏中的特效元素。掌握粒子系统和着色器编程能够让你创建出更加丰富和生动的三维场景。

阅读视图

概述