<!DOCTYPE html>
<html>
<head>
    <title>Simple Minecraft Clone</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            width: 100vw;
            height: 100vh;
            display: block;
        }
        #instructions {
            position: fixed;
            top: 10px;
            left: 10px;
            color: white;
            font-family: Arial, sans-serif;
            background: rgba(0,0,0,0.5);
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="instructions">
        WASD - Move<br>
        SPACE - Jump<br>
        LEFT CLICK - Remove block<br>
        RIGHT CLICK - Place block<br>
        MOUSE - Look around
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Initialize Three.js
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87CEEB); // Add blue sky

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Create grid of blocks
        const blocks = new THREE.Group();
        const blockGeometry = new THREE.BoxGeometry(1, 1, 1);
        const blockMaterial = new THREE.MeshPhongMaterial({ // Changed to PhongMaterial for better lighting
            color: 0x2E8B57, // Sea green color for blocks
            specular: 0x444444,
            shininess: 30
        });

        // Add lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(10, 20, 10);
        scene.add(directionalLight);

        // Create ground
        for (let x = -10; x <= 10; x++) {
            for (let z = -10; z <= 10; z++) {
                const block = new THREE.Mesh(blockGeometry, blockMaterial);
                block.position.set(x, -1, z);
                blocks.add(block);
            }
        }
        scene.add(blocks);

        // Player movement variables
        const player = {
            position: new THREE.Vector3(0, 0, 0),
            velocity: new THREE.Vector3(),
            onGround: false,
            speed: 0.1,
            jumpForce: 0.2
        };

        // Camera controls
        let pitch = 0;
        let yaw = 0;
        let mouseDown = false;

        // Movement controls
        const keys = {};

        // Raycaster for block placement/removal
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();

        // Block placement helper function
        function placeBlock(intersectPoint, normal) {
            const position = new THREE.Vector3()
                .copy(intersectPoint)
                .add(normal)
                .round();

            // Check if block already exists at position
            const blockExists = blocks.children.some(block => 
                block.position.x === position.x &&
                block.position.y === position.y &&
                block.position.z === position.z
            );

            if (!blockExists) {
                const block = new THREE.Mesh(blockGeometry, blockMaterial);
                block.position.copy(position);
                blocks.add(block);
            }
        }

        // Event listeners
        document.addEventListener('keydown', (e) => keys[e.key.toLowerCase()] = true);
        document.addEventListener('keyup', (e) => keys[e.key.toLowerCase()] = false);

        document.addEventListener('mousedown', (e) => {
            if (document.pointerLockElement === document.body) {
                raycaster.setFromCamera(new THREE.Vector2(0, 0), camera);
                const intersects = raycaster.intersectObjects(blocks.children);

                if (intersects.length > 0) {
                    if (e.button === 0) { // Left click - remove block
                        blocks.remove(intersects[0].object);
                    } else if (e.button === 2) { // Right click - add block
                        placeBlock(intersects[0].point, intersects[0].face.normal);
                    }
                }
            }
        });

        document.addEventListener('mouseup', () => mouseDown = false);
        document.addEventListener('mousemove', (e) => {
            if (document.pointerLockElement === document.body) {
                yaw -= e.movementX * 0.002;
                pitch -= e.movementY * 0.002;
                pitch = Math.max(-Math.PI/2, Math.min(Math.PI/2, pitch));
            }
        });

        document.addEventListener('contextmenu', (e) => e.preventDefault());

        renderer.domElement.addEventListener('click', () => {
            document.body.requestPointerLock();
        });

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);

            // Handle movement
            if (keys['w']) {
                player.position.x -= Math.sin(yaw) * player.speed;
                player.position.z -= Math.cos(yaw) * player.speed;
            }
            if (keys['s']) {
                player.position.x += Math.sin(yaw) * player.speed;
                player.position.z += Math.cos(yaw) * player.speed;
            }
            if (keys['a']) {
                player.position.x -= Math.cos(yaw) * player.speed;
                player.position.z += Math.sin(yaw) * player.speed;
            }
            if (keys['d']) {
                player.position.x += Math.cos(yaw) * player.speed;
                player.position.z -= Math.sin(yaw) * player.speed;
            }
            if (keys[' '] && player.onGround) {
                player.velocity.y = player.jumpForce;
                player.onGround = false;
            }

            // Apply gravity
            if (!player.onGround) {
                player.velocity.y -= 0.01;
            }
            player.position.y += player.velocity.y;

            // Simple ground collision
            if (player.position.y < 0) {
                player.position.y = 0;
                player.velocity.y = 0;
                player.onGround = true;
            }

            // Update camera position and rotation
            camera.position.copy(player.position);
            camera.position.y += 1.6; // Eye height
            camera.rotation.order = 'YXZ';
            camera.rotation.y = yaw;
            camera.rotation.x = pitch;

            renderer.render(scene, camera);
        }

        // Handle window resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        animate();
    </script>
</body>
</html> modify this code by adding endless terrain of blocks