ShaneBrumback · March 19, 2024 05:17
diff --git a/threejs-examples-how-to-program-3d-laser-ring-effect.html b/threejs-examples-how-to-program-3d-laser-ring-effect.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">
    <title>Three.js Examples - How To Program 3D a Laser Ring Effect</title>

    <style>

        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
    </style>

 </head>
 <body>

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


        // 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.x = 20; // Set the initial x-coordinate of the camera
        camera.position.z = 20; // Set the initial z-coordinate of the camera
        camera.position.y = 10; // Set the initial y-coordinate of the camera
        camera.zoom = 5;

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

        // Set up the camera aspect ratio
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        // Normalize the scene's scale and multiply by 1
        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

        // Add window resize event listener
        window.addEventListener('resize', onWindowResize);

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

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

        // Create the spotlight with shadows
        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(10, 20, 30);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // Create a torus geometry with the following parameters:
        // radius: 0.5 units
        // tube diameter: 0.05 units
        // number of radial segments: 16
        // number of tubular segments: 100
        var ringGeometry = new THREE.TorusGeometry(.5, 0.05, 16, 100);

        // Create a yellow material for the torus
        var ringMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

        // Combine the geometry and material to create the torus mesh
        var ring = new THREE.Mesh(ringGeometry, ringMaterial);

        // Set the initial position of the torus to the origin (0, 0, 0)
        ring.position.z = 0;
        ring.position.x = 0;
        ring.position.y = 0;

        // Make the camera look at the torus
        camera.lookAt(ring)

        // Add the torus to the scene
        scene.add(ring);

        // Define the animation function
        var animate = function () {
            // Request the next animation frame
            requestAnimationFrame(animate);

            // Increase the scale of the torus along all axes
            ring.scale.x += 0.025;
            ring.scale.y += 0.025;
            ring.scale.z += 0.025;

            // Move the torus forward along the Z-axis
            ring.position.z -= .75;

            // If the torus has moved far enough along the Z-axis, reset its position and scale
            if (ring.position.z <= -10) {
                ring.position.z = 0;
                ring.scale.x = 1;
                ring.scale.y = 1;
                ring.scale.z = 1;
            }

            // Update the camera controls
            controls.update()

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

        // Call the animation function to start the animation
        animate();


    </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">
	<title>Three.js Examples - How To Program 3D a Laser Ring Effect</title>

	<style>

	body {
	overflow: hidden;
	margin: 0;
	padding: 0;
	}
	</style>

	</head>
	<body>

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


	// 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.x = 20; // Set the initial x-coordinate of the camera
	camera.position.z = 20; // Set the initial z-coordinate of the camera
	camera.position.y = 10; // Set the initial y-coordinate of the camera
	camera.zoom = 5;

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

	// Set up the camera aspect ratio
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	// Normalize the scene's scale and multiply by 1
	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

	// Add window resize event listener
	window.addEventListener('resize', onWindowResize);

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

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

	// Create the spotlight with shadows
	const spotLight = new THREE.SpotLight(0xffffff);
	spotLight.position.set(10, 20, 30);
	spotLight.castShadow = true;
	scene.add(spotLight);

	// Create a torus geometry with the following parameters:
	// radius: 0.5 units
	// tube diameter: 0.05 units
	// number of radial segments: 16
	// number of tubular segments: 100
	var ringGeometry = new THREE.TorusGeometry(.5, 0.05, 16, 100);

	// Create a yellow material for the torus
	var ringMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

	// Combine the geometry and material to create the torus mesh
	var ring = new THREE.Mesh(ringGeometry, ringMaterial);

	// Set the initial position of the torus to the origin (0, 0, 0)
	ring.position.z = 0;
	ring.position.x = 0;
	ring.position.y = 0;

	// Make the camera look at the torus
	camera.lookAt(ring)

	// Add the torus to the scene
	scene.add(ring);

	// Define the animation function
	var animate = function () {
	// Request the next animation frame
	requestAnimationFrame(animate);

	// Increase the scale of the torus along all axes
	ring.scale.x += 0.025;
	ring.scale.y += 0.025;
	ring.scale.z += 0.025;

	// Move the torus forward along the Z-axis
	ring.position.z -= .75;

	// If the torus has moved far enough along the Z-axis, reset its position and scale
	if (ring.position.z <= -10) {
	ring.position.z = 0;
	ring.scale.x = 1;
	ring.scale.y = 1;
	ring.scale.z = 1;
	}

	// Update the camera controls
	controls.update()

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

	// Call the animation function to start the animation
	animate();


	</script>

	</body>
	</html>