ShaneBrumback · May 30, 2025 08:54
diff --git a/threejs-examples-creating-3d-objects-with-fog.html b/threejs-examples-creating-3d-objects-with-fog.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 - Creating 3D Object With Fog</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>

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


        // Set up the scene, camera, and renderer
        const scene = new THREE.Scene();
        {
            const near = 5;
            const far = 10;
            const color = 'lightblue';
            const density = 0.1;
            scene.fog = new THREE.FogExp2(color, density);
            scene.background = new THREE.Color(color);
        }

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

        // Set up the renderer
        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);

        document.body.appendChild(renderer.domElement);

        // Create a ball
        const ballGeometry = new THREE.SphereGeometry(1, 32, 32);
        const ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffff00 });
        const ball = new THREE.Mesh(ballGeometry, ballMaterial);
        ball.rotation.x = Math.PI / 4;
        ball.rotation.y = Math.PI / 4;
        ball.castShadow = true;
        scene.add(ball);

        // Create a cone
        const coneGeometry = new THREE.ConeGeometry(1, 2, 32);
        const coneMaterial = new THREE.MeshLambertMaterial({ color: 0x0000FF });
        const cone = new THREE.Mesh(coneGeometry, coneMaterial);
        cone.position.x = -3;
        cone.rotation.x = Math.PI / 4;
        cone.rotation.y = Math.PI / 4;
        cone.castShadow = true;
        scene.add(cone);

        // Create a box
        const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
        const boxMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
        const box = new THREE.Mesh(boxGeometry, boxMaterial);
        box.position.x = 3;
        box.rotation.x = Math.PI / 4;
        box.rotation.y = Math.PI / 4;
        box.castShadow = true;
        scene.add(box);

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

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

        // Add ambient light
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);

        // Create the plane's geometry
        const planeGeometry = new THREE.PlaneGeometry(100, 100);
        // Create a material to apply to the plane
        const planeMaterial = new THREE.MeshBasicMaterial({
            color: 'blue',
            side: THREE.DoubleSide,
            depthWrite: false
        });
        // Create the plane
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = Math.PI / 2;
        plane.position.y = -3;
        plane.receiveShadow = true;
        plane.castShadow = true
        // Add the plane to the scene
        scene.add(plane);
        //Add a grid helper
        var grid = new THREE.GridHelper(100, 30);
        grid.renderOrder = 0;
        grid.position.y = -3;
        scene.add(grid);

        // Enable shadows on the spheres
        scene.traverse(function (node) {
            if (node instanceof THREE.Mesh) {
                node.castShadow = true;
            }
        });



        // Animate the scene
        function animate() {
            requestAnimationFrame(animate);

            ball.rotation.x += 0.01;
            ball.rotation.y += 0.01;

            cone.rotation.x += 0.01;
            cone.rotation.y += 0.01;

            box.rotation.x += 0.01;
            box.rotation.y += 0.01;

            controls.update();
            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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Three.js Examples - Creating 3D Object With Fog</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>

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


	// Set up the scene, camera, and renderer
	const scene = new THREE.Scene();
	{
	const near = 5;
	const far = 10;
	const color = 'lightblue';
	const density = 0.1;
	scene.fog = new THREE.FogExp2(color, density);
	scene.background = new THREE.Color(color);
	}

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

	// Set up the renderer
	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);

	document.body.appendChild(renderer.domElement);

	// Create a ball
	const ballGeometry = new THREE.SphereGeometry(1, 32, 32);
	const ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffff00 });
	const ball = new THREE.Mesh(ballGeometry, ballMaterial);
	ball.rotation.x = Math.PI / 4;
	ball.rotation.y = Math.PI / 4;
	ball.castShadow = true;
	scene.add(ball);

	// Create a cone
	const coneGeometry = new THREE.ConeGeometry(1, 2, 32);
	const coneMaterial = new THREE.MeshLambertMaterial({ color: 0x0000FF });
	const cone = new THREE.Mesh(coneGeometry, coneMaterial);
	cone.position.x = -3;
	cone.rotation.x = Math.PI / 4;
	cone.rotation.y = Math.PI / 4;
	cone.castShadow = true;
	scene.add(cone);

	// Create a box
	const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
	const boxMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
	const box = new THREE.Mesh(boxGeometry, boxMaterial);
	box.position.x = 3;
	box.rotation.x = Math.PI / 4;
	box.rotation.y = Math.PI / 4;
	box.castShadow = true;
	scene.add(box);

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

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

	// Add ambient light
	const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
	scene.add(ambientLight);

	// Create the plane's geometry
	const planeGeometry = new THREE.PlaneGeometry(100, 100);
	// Create a material to apply to the plane
	const planeMaterial = new THREE.MeshBasicMaterial({
	color: 'blue',
	side: THREE.DoubleSide,
	depthWrite: false
	});
	// Create the plane
	const plane = new THREE.Mesh(planeGeometry, planeMaterial);
	plane.rotation.x = Math.PI / 2;
	plane.position.y = -3;
	plane.receiveShadow = true;
	plane.castShadow = true
	// Add the plane to the scene
	scene.add(plane);
	//Add a grid helper
	var grid = new THREE.GridHelper(100, 30);
	grid.renderOrder = 0;
	grid.position.y = -3;
	scene.add(grid);

	// Enable shadows on the spheres
	scene.traverse(function (node) {
	if (node instanceof THREE.Mesh) {
	node.castShadow = true;
	}
	});



	// Animate the scene
	function animate() {
	requestAnimationFrame(animate);

	ball.rotation.x += 0.01;
	ball.rotation.y += 0.01;

	cone.rotation.x += 0.01;
	cone.rotation.y += 0.01;

	box.rotation.x += 0.01;
	box.rotation.y += 0.01;

	controls.update();
	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>
No results found