start . me .
Directory path . web , three-js , cube .

HTML Document File : cube01.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Raytraced Rotating Cube</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://unpkg.com/three-js@79.0.0/three.js"></script>
    <script>
        // Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true; // Older API for shadows
        document.body.appendChild(renderer.domElement);

        // Cube
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshLambertMaterial({ color: 0x44aa88 });
        const cube = new THREE.Mesh(geometry, material);
        cube.castShadow = true;
        scene.add(cube);

        // Floor (Checkerboard)
        const floorGeometry = new THREE.PlaneGeometry(10, 10);
        const floorMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
        const floor = new THREE.Mesh(floorGeometry, floorMaterial);
        floor.rotation.x = -Math.PI / 2;
        floor.position.y = -1; // Place below the cube
        floor.receiveShadow = true;
        scene.add(floor);

        // Load sharper checkerboard texture
        const textureLoader = new THREE.TextureLoader();
        textureLoader.load('https://threejsfundamentals.org/threejs/resources/images/checker.png', function(texture) {
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(5, 5);

            // Set texture filtering for sharper rendering
            texture.minFilter = THREE.NearestFilter; // Use nearest neighbor for minification
            texture.magFilter = THREE.NearestFilter; // Use nearest neighbor for magnification
            floorMaterial.map = texture;
            floorMaterial.needsUpdate = true;
        });

        // Directional Light
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(5, 5, 5);
        light.castShadow = true;
        scene.add(light);

        // Ambient Light for overall brightness
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);

        // Camera position
        camera.position.z = 5;

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>