ShaneBrumback · March 19, 2024 05:16
diff --git a/threejs-examples-rocket-engine-particle-system.html b/threejs-examples-rocket-engine-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 - Rocket Engine 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/rocket-engine-particle-system.html">
        <h1>Threejs Examples - Rocket Engine 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 src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>

    <script type="module">

        function init() {

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

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

            // Set up the camera
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.x = 2; // Set the initial x-coordinate of the camera
            camera.position.z = 2; // Set the initial z-coordinate of the camera
            camera.position.y = 1; // Set the initial y-coordinate of the camera
            camera.zoom = 5;

            // Set up the renderer and Configure settings
            let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: 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);

            // Set the aspect ratio of the camera and update the projection matrix
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            // Scale the scene
            scene.scale.normalize().multiplyScalar(1);

            // Set up the orbital controls
            const controls = new THREE.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 \ helper
            var grid = new THREE.GridHelper(100, 150);
            scene.add(grid);

            // Create a Vector2 for mouse coordinates
            const mouse = new THREE.Vector2();

            // Add event listeners for resizing, clicking and moving the mouse
            window.addEventListener('resize', onWindowResize, false);

            // Function to handle window resize
            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix
                renderer.setSize(window.innerWidth, window.innerHeight);
            }

            // Function to handle mouse click
            function onMouseClick(event) {

                // Set the x and y coordinates of the mouse
                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
            }

            // Create a particle geometry for rocket exhaust
            let particleGeometry = new THREE.BufferGeometry();

            // Create an array of particle positions
            var particlePositions = new Float32Array(1000 * 3);

            // Loop through and set the initial x, y, and z coordinates for each particle
            for (var i = 0; i < 100; i++) {
                var x = 0;
                var y = 0;
                var z = 0;
                particlePositions[i * 3 + 0] = x;
                particlePositions[i * 3 + 1] = y;
                particlePositions[i * 3 + 2] = z;
            }

            // Add the particle positions to the buffer geometry
            particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));


            // Create a material for the particles
            var particleMaterial = new THREE.PointsMaterial({
                color: 0xffffff,
                size: 0.05
            });

            // Create a particle system from the buffer geometry and material
            var particleSystem = new THREE.Points(particleGeometry, particleMaterial);

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

            // Function to animate the rocket exhaust particles
            function animateRocketExhaustParticles() {

                // Get the particle positions from the buffer geometry
                var positions = particleGeometry.attributes.position.array;

                // Loop through each particle
                for (var i = 0; i < 1000; i++) {

                    // Assign a random speed to the particle
                    var speed = Math.random() * 0.5;

                    // Move the particle in the -z direction at the random speed
                    positions[i * 3 + 2] -= speed;

                    //expanding on x and y axis
                    positions[i * 3 + 0] += (Math.random() - 0.5) * 0.08;
                    positions[i * 3 + 1] += (Math.random() - 0.5) * 0.08;

                    // Check if the particle has reached the reset point
                    if (positions[i * 3 + 2] < -2) {
                        // Reset the particle back to its starting position
                        positions[i * 3 + 0] = mouse.x;
                        positions[i * 3 + 1] = mouse.y;
                        positions[i * 3 + 2] = 0;
                    }
                }

                // Update the particle positions in the buffer geometry
                particleGeometry.attributes.position.needsUpdate = true;
            }

            function animate() {

                requestAnimationFrame(animate);
                // animate Rocket exhaust particles
                animateRocketExhaustParticles()
                controls.update()
                renderer.render(scene, camera);

            }

            animate();

        }

        init()

    </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 - Rocket Engine 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/rocket-engine-particle-system.html">
	<h1>Threejs Examples - Rocket Engine 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 src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>

	<script type="module">

	function init() {

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

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

	// Set up the camera
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.x = 2; // Set the initial x-coordinate of the camera
	camera.position.z = 2; // Set the initial z-coordinate of the camera
	camera.position.y = 1; // Set the initial y-coordinate of the camera
	camera.zoom = 5;

	// Set up the renderer and Configure settings
	let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: 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);

	// Set the aspect ratio of the camera and update the projection matrix
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	// Scale the scene
	scene.scale.normalize().multiplyScalar(1);

	// Set up the orbital controls
	const controls = new THREE.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 \ helper
	var grid = new THREE.GridHelper(100, 150);
	scene.add(grid);

	// Create a Vector2 for mouse coordinates
	const mouse = new THREE.Vector2();

	// Add event listeners for resizing, clicking and moving the mouse
	window.addEventListener('resize', onWindowResize, false);

	// Function to handle window resize
	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix
	renderer.setSize(window.innerWidth, window.innerHeight);
	}

	// Function to handle mouse click
	function onMouseClick(event) {

	// Set the x and y coordinates of the mouse
	mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
	mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
	}

	// Create a particle geometry for rocket exhaust
	let particleGeometry = new THREE.BufferGeometry();

	// Create an array of particle positions
	var particlePositions = new Float32Array(1000 * 3);

	// Loop through and set the initial x, y, and z coordinates for each particle
	for (var i = 0; i < 100; i++) {
	var x = 0;
	var y = 0;
	var z = 0;
	particlePositions[i * 3 + 0] = x;
	particlePositions[i * 3 + 1] = y;
	particlePositions[i * 3 + 2] = z;
	}

	// Add the particle positions to the buffer geometry
	particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));


	// Create a material for the particles
	var particleMaterial = new THREE.PointsMaterial({
	color: 0xffffff,
	size: 0.05
	});

	// Create a particle system from the buffer geometry and material
	var particleSystem = new THREE.Points(particleGeometry, particleMaterial);

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

	// Function to animate the rocket exhaust particles
	function animateRocketExhaustParticles() {

	// Get the particle positions from the buffer geometry
	var positions = particleGeometry.attributes.position.array;

	// Loop through each particle
	for (var i = 0; i < 1000; i++) {

	// Assign a random speed to the particle
	var speed = Math.random() * 0.5;

	// Move the particle in the -z direction at the random speed
	positions[i * 3 + 2] -= speed;

	//expanding on x and y axis
	positions[i * 3 + 0] += (Math.random() - 0.5) * 0.08;
	positions[i * 3 + 1] += (Math.random() - 0.5) * 0.08;

	// Check if the particle has reached the reset point
	if (positions[i * 3 + 2] < -2) {
	// Reset the particle back to its starting position
	positions[i * 3 + 0] = mouse.x;
	positions[i * 3 + 1] = mouse.y;
	positions[i * 3 + 2] = 0;
	}
	}

	// Update the particle positions in the buffer geometry
	particleGeometry.attributes.position.needsUpdate = true;
	}

	function animate() {

	requestAnimationFrame(animate);
	// animate Rocket exhaust particles
	animateRocketExhaustParticles()
	controls.update()
	renderer.render(scene, camera);

	}

	animate();

	}

	init()

	</script>
	</body>
	</html>