ShaneBrumback · April 30, 2025 01:43
diff --git a/threejs-examples-animated-fragment-shader-background.html b/threejs-examples-animated-fragment-shader-background.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 - Animated Fragment Shader Background</title>
 </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">

        // 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 the scene
        var scene = new THREE.Scene();

        // Set up the camera
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        // Create the cube
        var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xffffff }));
        scene.add(cube);

        // Create the gradient background shader material
        var backgroundMaterial = new THREE.ShaderMaterial({
            uniforms: {
                u_time: { value: 0.0 }
            },
            vertexShader: `
                        void main() {
                          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
                        }
                      `,
            fragmentShader: `
                        uniform float u_time;

                        void main() {
                          gl_FragColor = vec4(
                            sin( u_time + gl_FragCoord.x * 0.01 ) * 0.5 + 0.5,
                            sin( u_time + gl_FragCoord.y * 0.01 ) * 0.5 + 0.5,
                            sin( u_time ) * 0.5 + 0.5,
                            1.0
                          );
                        }
                      `
        });

        // Create a full screen quad to render the background
        var background = new THREE.Mesh(
            new THREE.PlaneGeometry(4, 4),
            backgroundMaterial
        );
        background.position.z = -1;
        scene.add(background);

        // Animate the gradient
        function animate() {
            requestAnimationFrame(animate);
            backgroundMaterial.uniforms.u_time.value += 0.05;
            renderer.render(scene, camera);
        }

        animate();

        // 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);
        }

    </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 - Animated Fragment Shader Background</title>
	</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">

	// 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 the scene
	var scene = new THREE.Scene();

	// Set up the camera
	var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

	// Create the cube
	var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xffffff }));
	scene.add(cube);

	// Create the gradient background shader material
	var backgroundMaterial = new THREE.ShaderMaterial({
	uniforms: {
	u_time: { value: 0.0 }
	},
	vertexShader: `
	void main() {
	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
	`,
	fragmentShader: `
	uniform float u_time;

	void main() {
	gl_FragColor = vec4(
	sin( u_time + gl_FragCoord.x * 0.01 ) * 0.5 + 0.5,
	sin( u_time + gl_FragCoord.y * 0.01 ) * 0.5 + 0.5,
	sin( u_time ) * 0.5 + 0.5,
	1.0
	);
	}
	`
	});

	// Create a full screen quad to render the background
	var background = new THREE.Mesh(
	new THREE.PlaneGeometry(4, 4),
	backgroundMaterial
	);
	background.position.z = -1;
	scene.add(background);

	// Animate the gradient
	function animate() {
	requestAnimationFrame(animate);
	backgroundMaterial.uniforms.u_time.value += 0.05;
	renderer.render(scene, camera);
	}

	animate();

	// 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);
	}

	</script>

	</body>
	</html>