ShaneBrumback · March 19, 2024 05:17
diff --git a/threejs-examples-multi-color-cloud-particle-system.html b/threejs-examples-multi-color-cloud-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 - Multi Color Cloud 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/animated-multi-color-cloud-particle-system.html">
        <h1>Threejs Examples - Multi Color Cloud 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() {

            // Create the scene, camera, and renderer
            let scene = new THREE.Scene();
            let camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 1, 4000);
            let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            let previousTime = 0;

            // Configure renderer settings
            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 = '-3';
            renderer.domElement.style.left = '0';
            renderer.domElement.style.top = '0';
            document.body.appendChild(renderer.domElement);

            // Add ambient light to the scene
            let ambient = new THREE.AmbientLight(0x555555);
            ambient.intensity = 1;
            scene.add(ambient);

            // Add directional light to the scene
            let directionalLight = new THREE.DirectionalLight(0xff8c19);
            directionalLight.position.set(0, 0, 1);
            scene.add(directionalLight);

            // Add point lights to the scene
            let whiteLight = new THREE.PointLight('white', 100, 450, 1);
            whiteLight.position.set(200, 300, 100);
            scene.add(whiteLight);

            let redLight = new THREE.PointLight(0xd8547e, 250, 450, 1);
            redLight.position.set(200, 300, 100);
            scene.add(redLight);

            let blueLight = new THREE.PointLight(0x3677ac, 250, 450, 1);
            blueLight.position.set(300, 300, 200);
            scene.add(blueLight);


            // Load the smoke texture
            const textureLoader = new THREE.TextureLoader();
            const smokeTexture = textureLoader.load('../images/smoke3.png');

            // Create an array to store the planes
            const planes = [];

            // Define colors for the planes
            const colors = ['blue', 'white', 'orange']; // Red, White, Blue, Orange

            // Create 50 planes with smoke texture
            for (let i = 0; i < 25; i++) {
                const planeGeometry = new THREE.PlaneGeometry(15, 15);

                const planeMaterial = new THREE.MeshPhongMaterial({
                    map: smokeTexture,
                    transparent: true,
                    opacity: 0.5,
                    depthTest: false,
                    color: colors[i % colors.length],
                });

                const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
                scene.add(planeMesh);

                // Set random positions for the planes
                planeMesh.position.set(
                    Math.random() * 30 - 15,
                    Math.random() * 30 - 15,
                    -2
                );

                // Set the plane's orientation towards the camera
                const lookAtVector = new THREE.Vector3();
                lookAtVector.subVectors(camera.position, planeMesh.position);
                planeMesh.quaternion.setFromUnitVectors(new THREE.Vector3(0, 0, 1), lookAtVector.normalize());
                planeMesh.lookAt(camera.position)
                // Set a random rotation speed for each plane
                const speed = Math.random() * 0.0025;
                planeMesh.userData.speed = speed;
                planes.push(planeMesh);
            }

            // Adjust the camera aspect ratio and update renderer size on window resize
            window.addEventListener("resize", onWindowResize, false);

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

            // Animation loop
            function animate(currentTime) {
                requestAnimationFrame(animate);

                // Rotate the planes
                for (const plane of planes) {
                    plane.rotateOnAxis(new THREE.Vector3(0, 0, 1), plane.userData.speed);
                }

                // Calculate delta time
                const delta = currentTime - previousTime;
                previousTime = currentTime;

                // Render the scene
                renderer.render(scene, camera);
            }

            // Start the animation loop
            animate();
        }

        // Call the init function to start the scene
        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 - Multi Color Cloud 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/animated-multi-color-cloud-particle-system.html">
	<h1>Threejs Examples - Multi Color Cloud 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() {

	// Create the scene, camera, and renderer
	let scene = new THREE.Scene();
	let camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 1, 4000);
	let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
	let previousTime = 0;

	// Configure renderer settings
	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 = '-3';
	renderer.domElement.style.left = '0';
	renderer.domElement.style.top = '0';
	document.body.appendChild(renderer.domElement);

	// Add ambient light to the scene
	let ambient = new THREE.AmbientLight(0x555555);
	ambient.intensity = 1;
	scene.add(ambient);

	// Add directional light to the scene
	let directionalLight = new THREE.DirectionalLight(0xff8c19);
	directionalLight.position.set(0, 0, 1);
	scene.add(directionalLight);

	// Add point lights to the scene
	let whiteLight = new THREE.PointLight('white', 100, 450, 1);
	whiteLight.position.set(200, 300, 100);
	scene.add(whiteLight);

	let redLight = new THREE.PointLight(0xd8547e, 250, 450, 1);
	redLight.position.set(200, 300, 100);
	scene.add(redLight);

	let blueLight = new THREE.PointLight(0x3677ac, 250, 450, 1);
	blueLight.position.set(300, 300, 200);
	scene.add(blueLight);


	// Load the smoke texture
	const textureLoader = new THREE.TextureLoader();
	const smokeTexture = textureLoader.load('../images/smoke3.png');

	// Create an array to store the planes
	const planes = [];

	// Define colors for the planes
	const colors = ['blue', 'white', 'orange']; // Red, White, Blue, Orange

	// Create 50 planes with smoke texture
	for (let i = 0; i < 25; i++) {
	const planeGeometry = new THREE.PlaneGeometry(15, 15);

	const planeMaterial = new THREE.MeshPhongMaterial({
	map: smokeTexture,
	transparent: true,
	opacity: 0.5,
	depthTest: false,
	color: colors[i % colors.length],
	});

	const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
	scene.add(planeMesh);

	// Set random positions for the planes
	planeMesh.position.set(
	Math.random() * 30 - 15,
	Math.random() * 30 - 15,
	-2
	);

	// Set the plane's orientation towards the camera
	const lookAtVector = new THREE.Vector3();
	lookAtVector.subVectors(camera.position, planeMesh.position);
	planeMesh.quaternion.setFromUnitVectors(new THREE.Vector3(0, 0, 1), lookAtVector.normalize());
	planeMesh.lookAt(camera.position)
	// Set a random rotation speed for each plane
	const speed = Math.random() * 0.0025;
	planeMesh.userData.speed = speed;
	planes.push(planeMesh);
	}

	// Adjust the camera aspect ratio and update renderer size on window resize
	window.addEventListener("resize", onWindowResize, false);

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

	// Animation loop
	function animate(currentTime) {
	requestAnimationFrame(animate);

	// Rotate the planes
	for (const plane of planes) {
	plane.rotateOnAxis(new THREE.Vector3(0, 0, 1), plane.userData.speed);
	}

	// Calculate delta time
	const delta = currentTime - previousTime;
	previousTime = currentTime;

	// Render the scene
	renderer.render(scene, camera);
	}

	// Start the animation loop
	animate();
	}

	// Call the init function to start the scene
	init();



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