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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,080评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,422评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,630评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,554评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,662评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,856评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,014评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,752评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,212评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,541评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,687评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,347评论 4赞 331
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,973评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,777评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,006评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,406评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,576评论 2赞 349

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