modify this code by  making blocks green, add blue sky and also add mechanism to put blocks new by right mouse button click <!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();
        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.MeshBasicMaterial({ color: 0x8B4513, wireframe: true });

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

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

        document.addEventListener('mousedown', (e) => {
            mouseDown = true;
            // Get mouse position
            mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

            raycaster.setFromCamera(mouse, 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
                    const position = intersects[0].point.add(intersects[0].face.normal);
                    const block = new THREE.Mesh(blockGeometry, blockMaterial);
                    block.position.round();
                    blocks.add(block);
                }
            }
        });

        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.z -= Math.cos(yaw) * player.speed;
            if (keys['s']) player.position.z += Math.cos(yaw) * player.speed;
            if (keys['a']) player.position.x -= Math.cos(yaw - Math.PI/2) * player.speed;
            if (keys['d']) player.position.x += Math.cos(yaw - Math.PI/2) * 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>