ShaneBrumback · April 30, 2025 01:43
diff --git a/threejs-examples-how-to-program-flashing-fragment-shader-effects.html b/threejs-examples-how-to-program-flashing-fragment-shader-effects.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 Flashing Fragment Shader Effects</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>

    <!-- Include Three.js library -->
    <script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>

    <!-- Include OrbitControls module -->
    <script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>

    <script type="module">

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

        // Configure renderer 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.domElement.id = 'renderer';
        renderer.setClearColor(0x000000, 1); // 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 glowing box
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.ShaderMaterial({
            uniforms: {
                time: { value: 0.0 }
            },
            vertexShader: `
                                    varying vec3 vNormal;
                                    void main() {
                                      vNormal = normal;
                                      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                                    }
                                  `,
            fragmentShader: `
                                    uniform float time;
                                    varying vec3 vNormal;
                                    void main() {
                                      vec3 color = vec3(0.5 + 0.5 * sin(time), 0.5 + 0.5 * cos(time), 0.5 + 0.5 * cos(time));
                                      gl_FragColor = vec4(color * vNormal, 1.0);
                                    }
                                `
        });


        // Add a 3d box to the scene
        const box = new THREE.Mesh(geometry, material);
        scene.add(box);


        // Animate the box
        function animate() {
            requestAnimationFrame(animate);
            material.uniforms.time.value += 0.05;
            box.rotation.x += 0.01;
            box.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        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 Flashing Fragment Shader Effects</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<!-- Include Three.js library -->
	<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>

	<!-- Include OrbitControls module -->
	<script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>

	<script type="module">

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

	// Configure renderer 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.domElement.id = 'renderer';
	renderer.setClearColor(0x000000, 1); // 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 glowing box
	const geometry = new THREE.BoxGeometry(1, 1, 1);
	const material = new THREE.ShaderMaterial({
	uniforms: {
	time: { value: 0.0 }
	},
	vertexShader: `
	varying vec3 vNormal;
	void main() {
	vNormal = normal;
	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
	}
	`,
	fragmentShader: `
	uniform float time;
	varying vec3 vNormal;
	void main() {
	vec3 color = vec3(0.5 + 0.5 * sin(time), 0.5 + 0.5 * cos(time), 0.5 + 0.5 * cos(time));
	gl_FragColor = vec4(color * vNormal, 1.0);
	}
	`
	});


	// Add a 3d box to the scene
	const box = new THREE.Mesh(geometry, material);
	scene.add(box);


	// Animate the box
	function animate() {
	requestAnimationFrame(animate);
	material.uniforms.time.value += 0.05;
	box.rotation.x += 0.01;
	box.rotation.y += 0.01;
	renderer.render(scene, camera);
	}

	animate();

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