美文网首页
three.js - Galaxy Generator

three.js - Galaxy Generator

作者: 闪电西兰花 | 来源:发表于2024-03-05 18:37 被阅读0次
    • 这篇笔记的最终实现目标,是创建一个星系,如下图:
    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

          本文链接:https://www.haomeiwen.com/subject/xmjzgdtx.html