ThreeJS makes a dynamic rotating galaxy

ThreeJS makes a dynamic rotating galaxy effect, and the detailed JS code is as follows:

      import * as THREE from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
      import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
      import WebGL from 'three/addons/capabilities/WebGL.js';
      import Stats from 'three/examples/jsm/libs/stats.module.js';
      import * as dat from 'dat.gui/build/dat.gui.js';
      import * as CANNON from 'cannon-es';
      import gsap from 'gsap/dist/gsap.js';



      const clock=new THREE.Clock()
      // 创建场景
      const scene = new THREE.Scene();
      // 场景加入坐标
      scene.add(new THREE.AxesHelper(2,2,2))

      // dat.gui 图形控制界面方法
      const gui=new dat.GUI()


      

      // 创建相机，视角为75°，宽高比为浏览器窗口，最近0.1，最远1000
      const camera  = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      // 相机位置
      camera.position.set(10, 10, 10)
      // 相机对准原点
      camera.lookAt(0, 0, 0)



      // 设置雾化，第一个参数是雾化颜色，第二个参数是最近距离，第三个参数是最远距离
      scene.fog=new THREE.Fog(0xffffff,1,500)


      // 创建一个帧率检测
      const stats=new Stats()
      // 设置帧率检测面板，传入面板id（0: fps, 1: ms, 2: mb）
      stats.setMode(0)
      // 设置帧率检测位置
      stats.domElement.style.position = 'absolute'
      stats.domElement.style.left = '0px'
      stats.domElement.style.top = '0px'
      // 将帧率检测添加到页面中
      document.body.appendChild(stats.domElement)


      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      // 设置渲染器可以渲染阴影
      renderer.shadowMap.enabled=true
      // 设置渲染器窗口的大小
      renderer.setSize( window.innerWidth, window.innerHeight );
      // 设置像素比，让渲染器使用和浏览器一样的像素比
      renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
      // 设置场景颜色
      renderer.setClearColor(new THREE.Color(0x000000),1)
      // 把渲染内容添加到页面上
      document.body.appendChild( renderer.domElement );


      //添加鼠标交互需要传入相机和canvas参数
      const orbitControls = new OrbitControls(camera,renderer.domElement)



      // 创建每个星星的贴图
      const textureLoader=new THREE.TextureLoader()
      const particlesTexture=textureLoader.load('/public/xh.png')

      // 设置银河系参数
      const params={
        // 星星的数量
        count:10000,
        // 旋臂的半径
        radius:5,
        // 旋臂的分支数
        branch:4,
        // 弯曲程度
        rotateScale:0.5,
        // 旋转速度
        rotationSpeed:0.001
      }
      // 创建一个数组用于保存生成的每个星星
      let pointsArray=[]
      // 创建一个数组用于保存生成的每个星星距离银河系中心的半径
      let pointsDistanceArray=[]
      function createGalaxy(){
        // 循环生成星星
        for(let i=0;i{
        reload()
      })
      // 调整银河半径
      gui.add(params,'radius',0,10).name('银河半径').onChange(()=>{
        reload()
      })
      // 调整旋臂数量
      gui.add(params,'branch',0,10,1).name('旋臂数量').onChange(()=>{
        reload()
      })
      // 旋转速度
      gui.add(params,'rotationSpeed',0,0.1).name('旋转速度').onChange(()=>{
        reload()
      })





      // 监听画面变化
      window.addEventListener('resize',()=>{
        // 更新摄像头
        camera.aspect=window.innerWidth/window.innerHeight
        // 更新摄像机投影矩阵
        camera.updateProjectionMatrix()
        // 更新渲染器
        renderer.setSize(window.innerWidth,window.innerHeight)
        // 设置渲染器的像素比
        renderer.setPixelRatio(window.devicePixelRatio)
      })

      // 双击进入全屏，退出全屏
      window.addEventListener('dblclick',()=>{
        const fullScreenElement=document.fullscreenElement
        if(!fullScreenElement){
          renderer.domElement.requestFullscreen()
        }else{
          document.exitFullscreen()
        }
      })



      function animate() {
        // 更新帧率检测
        stats.update()
        orbitControls.update()
        for(let i=0;i<pointsArray.length;i++){
           pointsArray[i].rotation.y+=(params.radius*2-pointsDistanceArray[i])*params.rotationSpeed
        }
        renderer.render( scene, camera )
        requestAnimationFrame( animate )
      }
      animate();