three.js - Galaxy Generator

这篇笔记的最终实现目标，是创建一个星系，如下图：

galaxy.png

Set up

<script setup>
  import * as THREE from 'three'
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  import * as dat from 'dat.gui'

  /**
   * Scene
  */
  const scene = new THREE.Scene()

  /**
   * Camera
  */
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    100
  )
  camera.position.set(3, 3, 3)

  /**
   * Renderer
  */
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement) // 在body上添加渲染器，domElement指向canvas

  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()

    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  })

  /**
    * 坐标轴
  */
  const axesHelper = new THREE.AxesHelper(5) // 坐标轴线段长度
  scene.add(axesHelper)

  /**
    * 控制器
  */
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  /**
    * animate
  */
  function animate () {
    controls.update()
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
  }
  animate()

  /**
    * gui
  */
  const gui = new dat.GUI()
</script>

setup.png

Create a generateGalaxy function and call it, 我们用这个方法生成一个默认参数的星系

  /**
    * Camera
  */
  ...
  ...

  /**
    * Galaxy
  */
  const generateGalaxy = () => {}
  generateGalaxy()

Create a parameters object that will contain all the parameters of our galaxy

  /**
    * Galaxy
  */
  const parameters = {}
  
  const generateGalaxy = () => {}
  generateGalaxy()

Create random particles based on count parameter

  const parameters = {
    count: 10000, // particles的数量
  }

  const generateGalaxy = () => {
    /**
     * geometry
    */
    const geometry = new THREE.BufferGeometry()
    // 创建一个空数组，长度为 count*3，每个点都有 x、y、z 3个坐标值
    const positions = new Float32Array(parameters.count * 3)

    for(let i = 0; i < parameters.count; i++) {
      const i3 = i * 3 // 0 3 6 9 12 ... 数组中的每3个值为一组(即一个顶点的坐标)

      // 填充positions数组
      positions[i3] = Math.random() 
      positions[i3 + 1] = Math.random() 
      positions[i3 + 2] = Math.random() 
    }
    generateGalaxy()

Create the PointMaterial class and add a size parameter

  const parameters = {
    count: 10000, // particles的数量
    size: 0.02, 
  }

  const generateGalaxy = () => {
    /**
     * geometry
    */
    ...

    /**
     * material
    */
    const material = new THREE.PointsMaterial({
      size: parameters.size,
      sizeAttenuation: true, // 使用PerspectiveCamera时，particle的size随相机深度衰减
      depthWrite: false,
      blending: THREE.AdditiveBlending
    })
  }
  generateGalaxy()

Create the Points

const generateGalaxy = () => {
    /**
     * geometry
    */
    ...


    /**
     * material
    */
    ...

   /**
    * points
   */
  const points = new THREE.Points(geometry, material)
  scene.add(points)
}
generateGalaxy()

points.png

从上面的图中可以看出，我们这个粒子堆没有居中（因为使用的Math.random(), 坐标范围被限制在 [0, 1]），并且比较集中不够分散，那么修改一下positions的设置

  const generateGalaxy = () => {
    /**
     * geometry
    */
    ...

    for(let i = 0; i < parameters.count; i++) {
      ...

      // 填充positions数组
      positions[i3] = (Math.random() - 0.5) * 3
      positions[i3 + 1] = (Math.random() - 0.5) * 3
      positions[i3 + 2] = (Math.random() - 0.5) * 3
    }

    ...
    ...
  }
  generateGalaxy()

居中后的points.png

tweaks

添加gui并设置调试参数
to know when to generate a new galaxy, you need to listen to the change event, use onFinishChange()
当我们在监听回调后创建了新的galaxy之后，但没有删除之前已创建的，so we need to destroy the previous galaxy, and then move the geometry, material, points variables outside the generateGalaxy
before assigning these variables, we can test if they already exist and used the dispose(), remove()

/**
  * Galaxy
*/
...

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

const generateGalaxy = () => {
  // destroy old galaxy, 每次操作完gui后都会再次执行generateGalaxy函数，避免反复创建新对象
  if(points !== null) {
    geometry.dispose() // 从内存中销毁对象
    material.dispose()
    scene.remove(points)  // mesh不存在占用内存的问题，因此只需要remove
  }

  /**
   * geometry
  */
  geometry = new THREE.BufferGeometry()
  ...
  ...

  /**
   * material
  */
  material = new THREE.PointsMaterial({
    ...
  })

 /**
  * points
 */
  points = new THREE.Points(geometry, material)
  ...
}

/*
  * gui
*/
const gui = new dat.GUI()
gui.add(parameters, 'count')
  .min(100)
  .max(1000000)
  .step(100)
  .onFinishChange(generateGalaxy)
gui.add(parameters, 'size')
  .min(0.001)
  .max(0.1)
  .step(0.001)
  .onFinishChange(generateGalaxy)

Create a radius parameter

  /**
    * Galaxy
  */
  const parameters = {
    count: 100000, // particles的数量
    size: 0.01, 
    radius: 5,  // 星系半径
  }
  ...
  ...

  /*
    * gui
  */
  ...
  ...
  gui.add(parameters, 'radius')
    .min(0.01)
    .max(20)
    .step(0.01)
    .onFinishChange(generateGalaxy)

Position the vertices in a straight line from the center and going as far as the radius, 这一步我们将所有的points随机分布在x轴上（可以注释掉axeshelper方便观察）

  const generateGalaxy = () => {
    ...

    /**
     * geometry
    */
    ...

    for(let i = 0; i < parameters.count; i++) {
      ...

      const radius = Math.random() * parameters.radius  // 星系半径

      // 填充positions数组
      positions[i3] = radius
      positions[i3 + 1] = 0
      positions[i3 + 2] = 0
    }
    ...
    ...
  }

Creat branches, 默认创建3个分支，分支与分支间的夹角相等，首先，创建 parameter

  const parameters = {
    count: 100000, // particles的数量
    size: 0.01, 
    radius: 5,  // 星系半径
    branches: 3,  // 星系分支，平分星系角度
  }

  gui.add(parameters, 'branches')
    .min(2)
    .max(20)
    .step(1)
    .onFinishChange(generateGalaxy)

Position the particles on those branches
- 在我们当前3个 branches 的基础上，通过取模的方式将points顺时针依次分布在3个 branches 上

    /**
     * geometry
    */
    ...

    for(let i = 0; i < parameters.count; i++) {
      const i3 = i * 3 // 0 3 6 9 12 ... 数组中的每3个值为一组(即一个顶点的坐标)

      const radius = Math.random() * parameters.radius  // 星系半径
      // branch之间的夹角：i % parameters.branches  从0开始计算，分布在第几个branch
      const branchAngle = (i % parameters.branches) / parameters.branches * Math.PI * 2 // 2π的占比

      // 填充positions数组
      positions[i3] = Math.cos(branchAngle) * radius
      positions[i3 + 1] = 0
      positions[i3 + 2] = Math.sin(branchAngle) * radius
    }
    ...
    ...
  }
  generateGalaxy()

在当前branches上依次分布particles.png

Creat a spin parameter

  const parameters = {
    count: 100000, // particles的数量
    size: 0.01, 
    radius: 5,  // 星系半径
    branches: 3,  // 星系分支，平分星系角度
    spin: 1,  // 旋转系数，geometry距离原点越远旋转角度越大
  }

  gui.add(parameters, 'spin')
    .min(-5)
    .max(5)
    .step(0.001)
    .onFinishChange(generateGalaxy)

Multiply the spinAngle by spin parameter

    /**
     * geometry
    */
    ...
    for(let i = 0; i < parameters.count; i++) {
      ...

      const radius = Math.random() * parameters.radius  // 星系半径
      const spinAngle = radius * parameters.spin
      ...

      // 填充positions数组
      positions[i3] = Math.cos(branchAngle + spinAngle) * radius
      positions[i3 + 1] = 0
      positions[i3 + 2] = Math.sin(branchAngle + spinAngle) * radius
    }

spinAngle.png

Create randomness parameter

  const parameters = {
    count: 100000, // particles的数量
    size: 0.01, 
    radius: 5,  // 星系半径
    branches: 3,  // 星系分支，平分星系角度
    spin: 1,  // 旋转系数，geometry距离原点越远旋转角度越大
    randomness: 0.2,  // 随机性
  }

  gui.add(parameters, 'randomness')
    .min(0)
    .max(2)
    .step(0.001)
    .onFinishChange(generateGalaxy)

We want the particles to spread more outside, so we use the randomness for each branch

    for(let i = 0; i < parameters.count; i++) {
      ...

      ...
      ...

      // 每个轴不同的随机值
      const randomX = (Math.random() - 0.5) * parameters.randomness
      const randomY = (Math.random() - 0.5) * parameters.randomness
      const randomZ = (Math.random() - 0.5) * parameters.randomness

      // 填充positions数组
      positions[i3] = Math.cos(branchAngle + spinAngle) * radius + randomX
      positions[i3 + 1] = randomY
      positions[i3 + 2] = Math.sin(branchAngle + spinAngle) * radius + randomZ
    }

spread.png

观察下面的横截面图，我们可以发现particles的分布都很规律，但其实我们想要的效果是更自然一些，例如靠近branch的particles更多，距离branch越远，particle的数量也递减

spread后的横截面.png

Create the randomnessPower parameter

  const parameters = {
    count: 100000, // particles的数量
    size: 0.01, 
    radius: 5,  // 星系半径
    branches: 3,  // 星系分支，平分星系角度
    spin: 1,  // 旋转系数，geometry距离原点越远旋转角度越大
    randomness: 0.2,  // 随机性
    randomnessPower: 3,  // 随机性系数，可控制曲线变化
  }

  gui.add(parameters, 'randomnessPower')
    .min(1)
    .max(10)
    .step(0.001)
    .onFinishChange(generateGalaxy)

Apply the power with Math.pow() and multiply by -1 randomly to have negative values too

    for(let i = 0; i < parameters.count; i++) {
      ...
      ...
      const randomX = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1)
      const randomY = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1)
      const randomZ = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1)
      ...
      ...
    }

randomnessPower.png

We want a color for a inner particles and a color for the outer particles, so create a insideColor and an outsideColor

  const parameters = {
    count: 100000, // particles的数量
    size: 0.01, 
    radius: 5,  // 星系半径
    branches: 3,  // 星系分支，平分星系角度
    spin: 1,  // 旋转系数，geometry距离原点越远旋转角度越大
    randomness: 0.2,  // 随机性
    randomnessPower: 3,  // 随机性系数，可控制曲线变化
    insideColor: '#ff6030',
    outsideColor: '#1b3984',
  }

  gui.addColor(parameters, 'insideColor').onFinishChange(generateGalaxy)
  gui.addColor(parameters, 'outsideColor').onFinishChange(generateGalaxy)

Create a third color and use the lerp() method to mix color

    /**
     * geometry
    */
    ...
    const colors = new Float32Array(parameters.count * 3)

    const colorInside = new THREE.Color(parameters.insideColor)
    const colorOutside = new THREE.Color(parameters.outsideColor)

    for(let i = 0; i < parameters.count; i++) {
        ...
        ...
        ...
        const mixedColor = colorInside.clone()  // 这里使用clone()的原因是，lerp()输出的时候会改变原始值
        mixedColor.lerp(colorOutside, radius / parameters.radius)  // 根据半径计算混合程度

        colors[i3] = mixedColor.r
        colors[i3 +1] = mixedColor.g
        colors[i3 + 2] = mixedColor.b
    }

galaxy.png

three.js - Galaxy Generator

three.js - Galaxy Generator

这篇笔记的最终实现目标，是创建一个星系，如下图：

Set up

Create a `generateGalaxy` function and call it, 我们用这个方法生成一个默认参数的星系

Create a `parameters` object that will contain all the parameters of our galaxy

Create random particles based on `count` parameter

Create the `PointMaterial` class and add a `size` parameter

Create the `Points`

tweaks

Create a `radius` parameter

Position the vertices in a straight line from the center and going as far as the radius, 这一步我们将所有的`points`随机分布在x轴上（可以注释掉axeshelper方便观察）

Creat branches, 默认创建3个分支，分支与分支间的夹角相等，首先，创建 `parameter`

Position the particles on those branches

Creat a `spin` parameter

Multiply the `spinAngle` by `spin` parameter

Create `randomness` parameter

We want the particles to spread more outside, so we use the `randomness` for each branch

观察下面的横截面图，我们可以发现particles的分布都很规律，但其实我们想要的效果是更自然一些，例如靠近branch的particles更多，距离branch越远，particle的数量也递减

Create the `randomnessPower` parameter

Apply the power with `Math.pow()` and multiply by `-1` randomly to have negative values too

We want a color for a inner particles and a color for the outer particles, so create a `insideColor` and an `outsideColor`

Create a third color and use the `lerp()` method to mix color

推荐阅读更多精彩内容

three.js - Galaxy Generator

这篇笔记的最终实现目标，是创建一个星系，如下图：

Set up

Create a generateGalaxy function and call it, 我们用这个方法生成一个默认参数的星系

Create a parameters object that will contain all the parameters of our galaxy

Create random particles based on count parameter

Create the PointMaterial class and add a size parameter

Create the Points

tweaks

Create a radius parameter

Position the vertices in a straight line from the center and going as far as the radius, 这一步我们将所有的points随机分布在x轴上（可以注释掉axeshelper方便观察）

Creat branches, 默认创建3个分支，分支与分支间的夹角相等，首先，创建 parameter

Position the particles on those branches

Creat a spin parameter

Multiply the spinAngle by spin parameter

Create randomness parameter

We want the particles to spread more outside, so we use the randomness for each branch

观察下面的横截面图，我们可以发现particles的分布都很规律，但其实我们想要的效果是更自然一些，例如靠近branch的particles更多，距离branch越远，particle的数量也递减

Create the randomnessPower parameter

Apply the power with Math.pow() and multiply by -1 randomly to have negative values too

We want a color for a inner particles and a color for the outer particles, so create a insideColor and an outsideColor

Create a third color and use the lerp() method to mix color

推荐阅读更多精彩内容

Create a `generateGalaxy` function and call it, 我们用这个方法生成一个默认参数的星系

Create a `parameters` object that will contain all the parameters of our galaxy

Create random particles based on `count` parameter

Create the `PointMaterial` class and add a `size` parameter

Create the `Points`

Create a `radius` parameter

Position the vertices in a straight line from the center and going as far as the radius, 这一步我们将所有的`points`随机分布在x轴上（可以注释掉axeshelper方便观察）

Creat branches, 默认创建3个分支，分支与分支间的夹角相等，首先，创建 `parameter`

Creat a `spin` parameter

Multiply the `spinAngle` by `spin` parameter

Create `randomness` parameter

We want the particles to spread more outside, so we use the `randomness` for each branch

Create the `randomnessPower` parameter

Apply the power with `Math.pow()` and multiply by `-1` randomly to have negative values too

We want a color for a inner particles and a color for the outer particles, so create a `insideColor` and an `outsideColor`

Create a third color and use the `lerp()` method to mix color