3-Interactive 3D Scene with Customizable Lighting and Camera Controls using Three.js

This project showcases an interactive 3D scene rendered with Three.js, featuring customizable lighting and camera controls. The user can adjust the intensity and direction of light, as well as modify the camera’s position and rotation in real-time using range sliders. The 3D scene includes a rotating sphere and is fully responsive, ensuring a smooth user experience across different screen sizes. This interactive environment is perfect for exploring dynamic lighting effects and camera perspectives.
1-10-three.js-javascript kütüphaneleri
Three.js 3D graphics interactive scene lighting control camera control WebGL sphere animation responsive design range sliders real-time adjustments dynamic lighting user interaction web development JavaScript 3D
video
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Lighting and Camera Control</title>
    <style>
        /* Basic styling for the body, including margin, font, background color, and preventing overflow */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #222;
            color: white;
            overflow: hidden;
        }

        /* Styling for the modal to center the canvas on the screen */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Make the canvas fill the entire window */
        #threeCanvas {
            width: 100%;
            height: 100%;
        }

        /* Styling for the sliders container at the bottom */
        .slider-container {
            position: absolute;
            bottom: 10px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap; /* Allow wrapping of sliders if necessary */
            padding: 0 20px;
        }

        /* Reduced width for sliders */
        .slider {
            width: 160px; /* Reduced width of the sliders */
            margin: 5px;
        }

        /* Label styling for sliders */
        label {
            color: white;
        }

        /* Media query for smaller screens */
        @media (max-width: 600px) {
            /* Further reduce slider size on smaller screens */
            .slider {
                width: 120px; 
            }
            /* Reduce the gap between sliders */
            .slider-container {
                gap: 5px;
            }
        }
    </style>
</head>
<body>
    <!-- Modal containing the Three.js canvas -->
    <div class="modal">
        <div id="threeCanvas"></div>
    </div>

    <!-- Slider controls for light intensity, light direction, and camera position/rotation -->
    <div class="slider-container">
        <!-- Light Intensity and Direction Sliders -->
        <div>
            <label for="intensitySlider">Light Intensity</label>
            <input type="range" id="intensitySlider" class="slider" min="0" max="2" step="0.01" value="0.8">
        </div>
        <div>
            <label for="directionSliderX">Light Direction X</label>
            <input type="range" id="directionSliderX" class="slider" min="-5" max="5" step="0.1" value="5">
        </div>
        <div>
            <label for="directionSliderY">Light Direction Y</label>
            <input type="range" id="directionSliderY" class="slider" min="-5" max="5" step="0.1" value="5">
        </div>
        <div>
            <label for="directionSliderZ">Light Direction Z</label>
            <input type="range" id="directionSliderZ" class="slider" min="-5" max="5" step="0.1" value="5">
        </div>
        <!-- Camera Control Sliders -->
        <div>
            <label for="cameraPosX">Camera Position X</label>
            <input type="range" id="cameraPosX" class="slider" min="-10" max="10" step="0.1" value="5">
        </div>
        <div>
            <label for="cameraPosY">Camera Position Y</label>
            <input type="range" id="cameraPosY" class="slider" min="-10" max="10" step="0.1" value="5">
        </div>
        <div>
            <label for="cameraPosZ">Camera Position Z</label>
            <input type="range" id="cameraPosZ" class="slider" min="1" max="20" step="0.1" value="5">
        </div>
        <div>
            <label for="cameraRotX">Camera Rotation X</label>
            <input type="range" id="cameraRotX" class="slider" min="-1" max="1" step="0.01" value="0">
        </div>
        <div>
            <label for="cameraRotY">Camera Rotation Y</label>
            <input type="range" id="cameraRotY" class="slider" min="-1" max="1" step="0.01" value="0">
        </div>
        <div>
            <label for="cameraRotZ">Camera Rotation Z</label>
            <input type="range" id="cameraRotZ" class="slider" min="-1" max="1" step="0.01" value="0">
        </div>
    </div>

    <!-- Including Three.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Create a container for the canvas
        const canvasContainer = document.getElementById('threeCanvas');

        // Create the scene in Three.js
        const scene = new THREE.Scene();

        // Set up the camera for the scene
        const camera = new THREE.PerspectiveCamera(
            75, // Field of view (FOV)
            window.innerWidth / window.innerHeight, // Aspect ratio
            0.1, // Near plane
            1000 // Far plane
        );
        camera.position.set(0, 0, 5);

        // Set up the WebGL renderer
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        canvasContainer.appendChild(renderer.domElement);

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

        // Add directional light to the scene
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 5, 5); // Initial light position
        directionalLight.castShadow = true; // Enable shadow for the light
        scene.add(directionalLight);

        // Create a sphere geometry and material for visualization
        const geometry = new THREE.SphereGeometry(1, 64, 64);
        const material = new THREE.MeshStandardMaterial({
            color: 0xadd8e6, // Light blue color
            wireframe: false // Do not display in wireframe
        });
        const sphere = new THREE.Mesh(geometry, material);
        scene.add(sphere);

        sphere.position.set(0, 0, 0); // Set the sphere to the center of the scene

        // Animation function to rotate the sphere and render the scene
        function animate() {
            requestAnimationFrame(animate);
            sphere.rotation.x += 0.02;
            sphere.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        // Start the animation loop
        animate();

        // Handle window resizing to adjust canvas size and camera aspect ratio
        window.addEventListener('resize', () => {
            const width = window.innerWidth;
            const height = window.innerHeight;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        });

        // Calculate initial slider values based on the position of the sphere and camera
        const shapePosition = sphere.position;
        const cameraPosition = camera.position;

        const calculateSliderValue = (position, cameraPos) => {
            return cameraPos - position;
        };

        // Initialize slider elements
        const intensitySlider = document.getElementById('intensitySlider');
        const directionSliderX = document.getElementById('directionSliderX');
        const directionSliderY = document.getElementById('directionSliderY');
        const directionSliderZ = document.getElementById('directionSliderZ');
        const cameraPosX = document.getElementById('cameraPosX');
        const cameraPosY = document.getElementById('cameraPosY');
        const cameraPosZ = document.getElementById('cameraPosZ');
        const cameraRotX = document.getElementById('cameraRotX');
        const cameraRotY = document.getElementById('cameraRotY');
        const cameraRotZ = document.getElementById('cameraRotZ');

        // Set initial slider values based on sphere and camera position
        cameraPosX.value = calculateSliderValue(shapePosition.x, cameraPosition.x);
        cameraPosY.value = calculateSliderValue(shapePosition.y, cameraPosition.y);
        cameraPosZ.value = calculateSliderValue(shapePosition.z, cameraPosition.z);

        // Add event listeners for slider changes to adjust light and camera properties
        intensitySlider.addEventListener('input', (event) => {
            directionalLight.intensity = event.target.value;
        });

        directionSliderX.addEventListener('input', (event) => {
            directionalLight.position.x = event.target.value;
        });

        directionSliderY.addEventListener('input', (event) => {
            directionalLight.position.y = event.target.value;
        });

        directionSliderZ.addEventListener('input', (event) => {
            directionalLight.position.z = event.target.value;
        });

        cameraPosX.addEventListener('input', (event) => {
            camera.position.x = event.target.value;
        });

        cameraPosY.addEventListener('input', (event) => {
            camera.position.y = event.target.value;
        });

        cameraPosZ.addEventListener('input', (event) => {
            camera.position.z = event.target.value;
        });

        cameraRotX.addEventListener('input', (event) => {
            camera.rotation.x = event.target.value;
        });

        cameraRotY.addEventListener('input', (event) => {
            camera.rotation.y = event.target.value;
        });

        cameraRotZ.addEventListener('input', (event) => {
            camera.rotation.z = event.target.value;
        });
    </script>
</body>
</html>
CODE SIMULATION
kod
Facebook | Twitter | Linkedin | Whatsapp
index 1-10-three.js-java three.js ile 3d three.js ile iş three.js ile pe