ShaneBrumback · April 30, 2025 01:43
diff --git a/threejs-examples-exploring-interactive-visual-particle-systems.html b/threejs-examples-exploring-interactive-visual-particle-systems.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>Three.js Examples - Adding Transparent PNG Images To 3D Cube</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/blog/threejs-examples-exploring-interactive-visual-particle-systems.html">
        <h1>Threejs Examples - Exploring Interactive Visual Particle Systems</h1>
    </a>

    <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>

        // Initialize variables
        var scene, camera, renderer, controls; // Add controls variable
        var particles = [];
        var pointLight; // Declare the point light variable
        var ambientLight; // Declare the ambient light variable

        // Initialize Three.js scene
        function initScene() {
            // Create the scene
            scene = new THREE.Scene();

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

            // Create the renderer
            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.id = 'renderer';
            renderer.domElement.style.zIndex = '-1';
            renderer.domElement.style.left = '0';
            renderer.domElement.style.top = '0';
            document.body.appendChild(renderer.domElement);

            // Create orbit controls
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true; // Add damping effect for smoother control
            controls.dampingFactor = 0.05;
            controls.rotateSpeed = 0.2;
            controls.autoRotate = true;

            // Add event listener for mouse movement
            document.addEventListener('mousemove', onMouseMove, false);

            // Create a point light with a color and intensity
            pointLight = new THREE.PointLight(0xffffff, 1);
            scene.add(pointLight);

            // Create an ambient light with a color and intensity
            ambientLight = new THREE.AmbientLight(0x404040, 1);
            scene.add(ambientLight);

            // Add particles to the scene
            for (var i = 0; i < 1000; i++) {
                var particle = new THREE.Mesh(
                    new THREE.SphereGeometry(0.1, 16, 16),
                    new THREE.MeshPhongMaterial({ color: getRandomColor() }) // Use MeshPhongMaterial for lighting
                );
                particle.position.set(Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2);
                particle.velocity = new THREE.Vector3();
                particles.push(particle);
                scene.add(particle);
            }

            // Function to generate random color
            function getRandomColor() {
                var letters = '0123456789ABCDEF';
                var color = '#';
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }
        }

        // Handle mouse movement event
        function onMouseMove(event) {
            var mouse = new THREE.Vector2();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            // Create a raycaster from the mouse coordinates
            var raycaster = new THREE.Raycaster();
            raycaster.setFromCamera(mouse, camera);

            // Check for intersection between the raycaster and particles
            var intersects = raycaster.intersectObjects(particles);

            if (intersects.length > 0) {
                // Move particles away from the mouse position if the ray intersects with them
                intersects.forEach(function (intersect) {
                    var particle = intersect.object;
                    var distance = particle.position.distanceTo(intersect.point);
                    if (distance < 0.5) {
                        var direction = new THREE.Vector3().subVectors(particle.position, intersect.point).normalize();
                        particle.velocity.copy(direction).multiplyScalar(0.02);
                    }
                });
            }
        }

        // Update particle positions
        function updateParticles() {
            particles.forEach(function (particle) {
                particle.position.add(particle.velocity);
                particle.velocity.multiplyScalar(0.98); // Apply friction to slow down particles
                particle.position.y += Math.random() * 0.001 - 0.0005; // Random vertical motion
                particle.position.x += Math.random() * 0.001 - 0.0005; // Random horizontal motion
                particle.position.z += Math.random() * 0.001 - 0.0005; // Random depth motion
            });
        }

        // Animate the light
        function animateLight() {
            // Update the light's position or any other animation you want
            pointLight.position.x = Math.sin(Date.now() * 0.001) * 2; // Example: Move the point light on the x-axis based on time
        }

        // Render the scene
        function render() {
            requestAnimationFrame(render);
            updateParticles();
            animateLight(); // Call the animateLight function
            renderer.render(scene, camera);
            controls.update(); // Update orbit controls
        }

        // Call the initialization function and start rendering
        initScene();
        render();

        // 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>Three.js Examples - Adding Transparent PNG Images To 3D Cube</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/blog/threejs-examples-exploring-interactive-visual-particle-systems.html">
	<h1>Threejs Examples - Exploring Interactive Visual Particle Systems</h1>
	</a>

	<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>

	// Initialize variables
	var scene, camera, renderer, controls; // Add controls variable
	var particles = [];
	var pointLight; // Declare the point light variable
	var ambientLight; // Declare the ambient light variable

	// Initialize Three.js scene
	function initScene() {
	// Create the scene
	scene = new THREE.Scene();

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

	// Create the renderer
	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.id = 'renderer';
	renderer.domElement.style.zIndex = '-1';
	renderer.domElement.style.left = '0';
	renderer.domElement.style.top = '0';
	document.body.appendChild(renderer.domElement);

	// Create orbit controls
	controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.enableDamping = true; // Add damping effect for smoother control
	controls.dampingFactor = 0.05;
	controls.rotateSpeed = 0.2;
	controls.autoRotate = true;

	// Add event listener for mouse movement
	document.addEventListener('mousemove', onMouseMove, false);

	// Create a point light with a color and intensity
	pointLight = new THREE.PointLight(0xffffff, 1);
	scene.add(pointLight);

	// Create an ambient light with a color and intensity
	ambientLight = new THREE.AmbientLight(0x404040, 1);
	scene.add(ambientLight);

	// Add particles to the scene
	for (var i = 0; i < 1000; i++) {
	var particle = new THREE.Mesh(
	new THREE.SphereGeometry(0.1, 16, 16),
	new THREE.MeshPhongMaterial({ color: getRandomColor() }) // Use MeshPhongMaterial for lighting
	);
	particle.position.set(Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2);
	particle.velocity = new THREE.Vector3();
	particles.push(particle);
	scene.add(particle);
	}

	// Function to generate random color
	function getRandomColor() {
	var letters = '0123456789ABCDEF';
	var color = '#';
	for (var i = 0; i < 6; i++) {
	color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
	}
	}

	// Handle mouse movement event
	function onMouseMove(event) {
	var mouse = new THREE.Vector2();
	mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
	mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

	// Create a raycaster from the mouse coordinates
	var raycaster = new THREE.Raycaster();
	raycaster.setFromCamera(mouse, camera);

	// Check for intersection between the raycaster and particles
	var intersects = raycaster.intersectObjects(particles);

	if (intersects.length > 0) {
	// Move particles away from the mouse position if the ray intersects with them
	intersects.forEach(function (intersect) {
	var particle = intersect.object;
	var distance = particle.position.distanceTo(intersect.point);
	if (distance < 0.5) {
	var direction = new THREE.Vector3().subVectors(particle.position, intersect.point).normalize();
	particle.velocity.copy(direction).multiplyScalar(0.02);
	}
	});
	}
	}

	// Update particle positions
	function updateParticles() {
	particles.forEach(function (particle) {
	particle.position.add(particle.velocity);
	particle.velocity.multiplyScalar(0.98); // Apply friction to slow down particles
	particle.position.y += Math.random() * 0.001 - 0.0005; // Random vertical motion
	particle.position.x += Math.random() * 0.001 - 0.0005; // Random horizontal motion
	particle.position.z += Math.random() * 0.001 - 0.0005; // Random depth motion
	});
	}

	// Animate the light
	function animateLight() {
	// Update the light's position or any other animation you want
	pointLight.position.x = Math.sin(Date.now() * 0.001) * 2; // Example: Move the point light on the x-axis based on time
	}

	// Render the scene
	function render() {
	requestAnimationFrame(render);
	updateParticles();
	animateLight(); // Call the animateLight function
	renderer.render(scene, camera);
	controls.update(); // Update orbit controls
	}

	// Call the initialization function and start rendering
	initScene();
	render();

	// 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>