ShaneBrumback · April 30, 2025 01:43
diff --git a/threejs-examples-simple-particle-system.html b/threejs-examples-simple-particle-system.html
 <!--////////////////////////////////////////////////////////////////////////////////////////
 ///                                                                                      ///
 ///  Example Using Three.js Library, HTML, CSS & JavaScript                              ///
 //   3D Interactive Web Apps & Games   2021-2024                                         ///
 ///  Contact Shane Brumback https://www.shanebrumback.com                                ///
 ///  Send a message if you have questions about this code                                ///
 ///  I am a freelance developer. I develop any and all web.                              ///
 ///  Apps Websites 3D 2D CMS Systems etc. Contact me anytime :)                          ///
 ///                                                                                      ///
 ////////////////////////////////////////////////////////////////////////////////////////////-->

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Threejs Examples - Program a Simple Particle System</title>
    <style>
        body {
            color: white;
            text-align: center;
            margin: 0;
            background-color: black
        }

        a {
            text-decoration: none;
            color: white;
        }

        h1 {
            padding: 10px;
        }
    </style>
 </head>
 <body>
    <a href="http://www.shanebrumback.com/threejs-examples/simple-particle-system.html">
        <h1>Threejs Examples - Simple Particle System</h1>
    </a>

    <!--Load the latest version of Three.js from CDN-->
    <script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>

    <script type="module">

        // Set up the scene, camera, and renderer
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        // Create the renderer
        var renderer = new THREE.WebGLRenderer({ alpha: true, depth: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.toneMapping = THREE.ReinhardToneMapping;
        renderer.setClearColor(0x000000); // Set background color to black
        renderer.domElement.style.position = 'fixed';
        renderer.domElement.style.zIndex = '-1';
        renderer.domElement.style.left = '0';
        renderer.domElement.style.top = '0';
        document.body.appendChild(renderer.domElement);

        // Create a particle system
        var particleCount = 1000;
        var particles = new THREE.BufferGeometry();

        // Create the positions attribute
        var positions = new Float32Array(particleCount * 3);

        // Add random particles to the particle system
        for (var i = 0; i < particleCount; i++) {
            var index = i * 3;
            positions[index] = Math.random() * 10 - 5;
            positions[index + 1] = Math.random() * 10 - 5;
            positions[index + 2] = Math.random() * 10 - 5;
        }

        // Set the positions attribute to the BufferGeometry
        particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));

        // Create the particle material
        var particleMaterial = new THREE.PointsMaterial({
            color: 0xffffff,
            size: 0.1
        });

        // Create the particle system object
        var particleSystem = new THREE.Points(particles, particleMaterial);

        // Add the particle system to the scene
        scene.add(particleSystem);

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            particleSystem.rotation.x += 0.01;
            particleSystem.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        // Start the animation loop
        animate();

        // Resize handling
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        window.addEventListener('resize', onWindowResize, false);

    </script>


 </body>
 </html>
	<!--////////////////////////////////////////////////////////////////////////////////////////
	/// ///
	/// Example Using Three.js Library, HTML, CSS & JavaScript ///
	// 3D Interactive Web Apps & Games 2021-2024 ///
	/// Contact Shane Brumback https://www.shanebrumback.com ///
	/// Send a message if you have questions about this code ///
	/// I am a freelance developer. I develop any and all web. ///
	/// Apps Websites 3D 2D CMS Systems etc. Contact me anytime :) ///
	/// ///
	////////////////////////////////////////////////////////////////////////////////////////////-->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Threejs Examples - Program a Simple Particle System</title>
	<style>
	body {
	color: white;
	text-align: center;
	margin: 0;
	background-color: black
	}

	a {
	text-decoration: none;
	color: white;
	}

	h1 {
	padding: 10px;
	}
	</style>
	</head>
	<body>
	<a href="http://www.shanebrumback.com/threejs-examples/simple-particle-system.html">
	<h1>Threejs Examples - Simple Particle System</h1>
	</a>

	<!--Load the latest version of Three.js from CDN-->
	<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>

	<script type="module">

	// Set up the scene, camera, and renderer
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.z = 5;

	// Create the renderer
	var renderer = new THREE.WebGLRenderer({ alpha: true, depth: true });
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.toneMapping = THREE.ReinhardToneMapping;
	renderer.setClearColor(0x000000); // Set background color to black
	renderer.domElement.style.position = 'fixed';
	renderer.domElement.style.zIndex = '-1';
	renderer.domElement.style.left = '0';
	renderer.domElement.style.top = '0';
	document.body.appendChild(renderer.domElement);

	// Create a particle system
	var particleCount = 1000;
	var particles = new THREE.BufferGeometry();

	// Create the positions attribute
	var positions = new Float32Array(particleCount * 3);

	// Add random particles to the particle system
	for (var i = 0; i < particleCount; i++) {
	var index = i * 3;
	positions[index] = Math.random() * 10 - 5;
	positions[index + 1] = Math.random() * 10 - 5;
	positions[index + 2] = Math.random() * 10 - 5;
	}

	// Set the positions attribute to the BufferGeometry
	particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));

	// Create the particle material
	var particleMaterial = new THREE.PointsMaterial({
	color: 0xffffff,
	size: 0.1
	});

	// Create the particle system object
	var particleSystem = new THREE.Points(particles, particleMaterial);

	// Add the particle system to the scene
	scene.add(particleSystem);

	// Animation loop
	function animate() {
	requestAnimationFrame(animate);
	particleSystem.rotation.x += 0.01;
	particleSystem.rotation.y += 0.01;
	renderer.render(scene, camera);
	}

	// Start the animation loop
	animate();

	// Resize handling
	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}

	window.addEventListener('resize', onWindowResize, false);

	</script>


	</body>
	</html>