Working on my Galaxy Particle System

Showcase
1

This is the basic script I am working on multi-layers of stars rotating.

import * as THREE from ‘three’;
import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;

    // Define global variables
    let scene, camera, renderer;
    const spheres = [];

    // Set up Three js scene
    scene = new THREE.Scene();

    // Set up the camera
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 10;

    // Set up the renderer
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    scene.scale.normalize().multiplyScalar(1);

    // Set up the orbital controls
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.dampingFactor = 0.1; // Reduce camera damping for smoother movement
    controls.autoRotate = true; // Make the camera rotate sinuously around the spheres

    // Create a grid helper
    var grid = new THREE.GridHelper(100, 40);
    grid.position.y = -4;
    scene.add(grid);

    // Create an array to hold all the star particles
    const galaxyGroup = new THREE.Group()

    const particleArrays = [];

    createParticles()

    function createParticles() {
        // Create 5 arrays of particles
        for (let i = 0; i < 5; i++) {
            const particles = new THREE.BufferGeometry();
            const particleMaterial = new THREE.PointsMaterial({
                color: 0xffffff,
                size: 0.10,
            });
            const positions = new Float32Array(100 * 3);
            for (let j = 0; j < 100; j++) {

                // Calculate the angle for the current particle
                const angle = j * 0.4 + i * 0.5;

                // Calculate the x, y, and z positions of the particle based on the angle
                const particleX = (j * 0.1) * Math.cos(angle);
                const particleY = (j * 0.1) * Math.sin(angle);
                const particleZ = j * 0.01;

                // Set the position of the particle
                positions[j * 3] = particleX;
                positions[j * 3 + 1] = particleY;
                positions[j * 3 + 2] = particleZ;
            }

            particles.addAttribute('position', new THREE.BufferAttribute(positions, 3));
            const particleSystem = new THREE.Points(particles, particleMaterial);
            particleArrays.push(particleSystem);
            galaxyGroup.add(particleSystem);
        }
        scene.add(galaxyGroup);
        galaxyGroup.rotation.x = -60 * Math.PI / 180;
        galaxyGroup.rotation.y = -45 * Math.PI / 180;
    }

    function animate() {
        requestAnimationFrame(animate);
        galaxyGroup.rotateZ(.001)
        renderer.render(scene, camera);
    }


    animate();
2 Likes
2

@Shane_Brumback –

Thanks for sharing your work.

If these are stars orbiting around their mass center, it might be better if they rotate at different angular speeds. Thus stars near the mass center will have shorter orbital periods than distant stars. This adheres to the Kepler’s Third law.

– Pavel

1 Like
3

It would be sweet to run those calculations in a game!

1 Like