three.js - Galaxy Generator

這篇筆記的最終實現(xiàn)目標喷兼，是創(chuàng)建一個星系酒请，如下圖：

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, 我們用這個方法生成一個默認參數(shù)的星系

  /**
    * 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的數(shù)量
  }

  const generateGalaxy = () => {
    /**
     * geometry
    */
    const geometry = new THREE.BufferGeometry()
    // 創(chuàng)建一個空數(shù)組，長度為 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 ... 數(shù)組中的每3個值為一組(即一個頂點的坐標)

      // 填充positions數(shù)組
      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的數(shù)量
    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數(shù)組
      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并設置調試參數(shù)
to know when to generate a new galaxy, you need to listen to the change event, use onFinishChange()
當我們在監(jiān)聽回調后創(chuàng)建了新的galaxy之后，但沒有刪除之前已創(chuàng)建的雕欺，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后都會再次執(zhí)行generateGalaxy函數(shù)岛马，避免反復創(chuàng)建新對象
  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的數(shù)量
    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數(shù)組
      positions[i3] = radius
      positions[i3 + 1] = 0
      positions[i3 + 2] = 0
    }
    ...
    ...
  }

Creat branches, 默認創(chuàng)建3個分支，分支與分支間的夾角相等啦逆，首先谅海，創(chuàng)建 parameter

  const parameters = {
    count: 100000, // particles的數(shù)量
    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 ... 數(shù)組中的每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數(shù)組
      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的數(shù)量
    size: 0.01, 
    radius: 5,  // 星系半徑
    branches: 3,  // 星系分支，平分星系角度
    spin: 1,  // 旋轉系數(shù)盲镶，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數(shù)組
      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的數(shù)量
    size: 0.01, 
    radius: 5,  // 星系半徑
    branches: 3,  // 星系分支侥袜，平分星系角度
    spin: 1,  // 旋轉系數(shù)，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數(shù)組
      positions[i3] = Math.cos(branchAngle + spinAngle) * radius + randomX
      positions[i3 + 1] = randomY
      positions[i3 + 2] = Math.sin(branchAngle + spinAngle) * radius + randomZ
    }

spread.png

觀察下面的橫截面圖溉贿，我們可以發(fā)現(xiàn)particles的分布都很規(guī)律枫吧，但其實我們想要的效果是更自然一些，例如靠近branch的particles更多宇色，距離branch越遠九杂，particle的數(shù)量也遞減

spread后的橫截面.png

Create the randomnessPower parameter

  const parameters = {
    count: 100000, // particles的數(shù)量
    size: 0.01, 
    radius: 5,  // 星系半徑
    branches: 3,  // 星系分支，平分星系角度
    spin: 1,  // 旋轉系數(shù)宣蠕，geometry距離原點越遠旋轉角度越大
    randomness: 0.2,  // 隨機性
    randomnessPower: 3,  // 隨機性系數(shù)例隆，可控制曲線變化
  }

  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的數(shù)量
    size: 0.01, 
    radius: 5,  // 星系半徑
    branches: 3,  // 星系分支，平分星系角度
    spin: 1,  // 旋轉系數(shù)抢蚀，geometry距離原點越遠旋轉角度越大
    randomness: 0.2,  // 隨機性
    randomnessPower: 3,  // 隨機性系數(shù)镀层，可控制曲線變化
    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)  // 根據(jù)半徑計算混合程度

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

galaxy.png

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末皿曲，一起剝皮案震驚了整個濱河市唱逢，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌屋休，老刑警劉巖坞古，帶你破解...
沈念sama閱讀 216,692評論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異劫樟，居然都是意外死亡痪枫，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,482評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門毅哗，熙熙樓的掌柜王于貴愁眉苦臉地迎上來听怕，“玉大人捧挺，你說我怎么就攤上這事虑绵。” “怎么了闽烙？”我有些...
開封第一講書人閱讀 162,995評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵翅睛，是天一觀的道長声搁。經常有香客問我，道長捕发，這世上最難降的妖魔是什么疏旨？我笑而不...
開封第一講書人閱讀 58,223評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮扎酷，結果婚禮上檐涝，老公的妹妹穿的比我還像新娘。我一直安慰自己法挨，他們只是感情好谁榜，可當我...
茶點故事閱讀 67,245評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著凡纳，像睡著了一般窃植。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上荐糜，一...
開封第一講書人閱讀 51,208評論 1贊 299
城市分裂傳說
那天巷怜，我揣著相機與錄音，去河邊找鬼暴氏。笑死延塑，一個胖子當著我的面吹牛，可吹牛的內容都是我干的答渔。我是一名探鬼主播页畦，決...
沈念sama閱讀 40,091評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼研儒！你這毒婦竟也來了豫缨？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 38,929評論 0贊 274
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤端朵，失蹤者是張志新（化名）和其女友劉穎好芭，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體冲呢，經...
沈念sama閱讀 45,346評論 1贊 311
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡舍败，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,570評論 2贊 333
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了敬拓。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片邻薯。...
茶點故事閱讀 39,739評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖乘凸，靈堂內的尸體忽然破棺而出厕诡，到底是詐尸還是另有隱情，我是刑警寧澤营勤，帶...
沈念sama閱讀 35,437評論 5贊 344
?日本核電站爆炸內幕
正文年R本政府宣布灵嫌，位于F島的核電站壹罚，受9級特大地震影響，放射性物質發(fā)生泄漏寿羞。R本人自食惡果不足惜猖凛，卻給世界環(huán)境...
茶點故事閱讀 41,037評論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望绪穆。院中可真熱鬧辨泳，春花似錦、人聲如沸玖院。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,677評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽司恳。三九已至途乃，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間扔傅，已是汗流浹背耍共。一陣腳步聲響...
開封第一講書人閱讀 32,833評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留猎塞，地道東北人试读。一個月前我還...
沈念sama閱讀 47,760評論 2贊 369
代替公主和親
正文我出身青樓，卻偏偏與公主長得像荠耽，于是被迫代替她去往敵國和親钩骇。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,647評論 2贊 354

three.js - Galaxy Generator

three.js - Galaxy Generator

這篇筆記的最終實現(xiàn)目標喷兼，是創(chuàng)建一個星系酒请，如下圖：

Set up

Create a `generateGalaxy` function and call it, 我們用這個方法生成一個默認參數(shù)的星系

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, 默認創(chuàng)建3個分支，分支與分支間的夾角相等啦逆，首先谅海，創(chuàng)建 `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

觀察下面的橫截面圖溉贿，我們可以發(fā)現(xiàn)particles的分布都很規(guī)律枫吧，但其實我們想要的效果是更自然一些，例如靠近branch的particles更多宇色，距離branch越遠九杂，particle的數(shù)量也遞減

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

這篇筆記的最終實現(xiàn)目標喷兼，是創(chuàng)建一個星系酒请，如下圖：

Set up

Create a generateGalaxy function and call it, 我們用這個方法生成一個默認參數(shù)的星系

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, 默認創(chuàng)建3個分支，分支與分支間的夾角相等啦逆，首先谅海，創(chuàng)建 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

觀察下面的橫截面圖溉贿，我們可以發(fā)現(xiàn)particles的分布都很規(guī)律枫吧，但其實我們想要的效果是更自然一些，例如靠近branch的particles更多宇色，距離branch越遠九杂，particle的數(shù)量也遞減

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, 我們用這個方法生成一個默認參數(shù)的星系

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, 默認創(chuàng)建3個分支，分支與分支間的夾角相等啦逆，首先谅海，創(chuàng)建 `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