<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Wave Test</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #87CEEB;
        }
        .controls {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
            font-family: Arial, sans-serif;
        }
        .controls label, .controls input {
            display: block;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <label>Wave Amplitude:
            <input type="range" id="amplitude" min="0.5" max="5" step="0.1" value="2">
        </label>
        <label>Wave Frequency:
            <input type="range" id="frequency" min="0.1" max="2" step="0.1" value="1">
        </label>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        let scene, camera, renderer, plane, cube;
        let waveTime = 0;
        let amplitude = 2, frequency = 1;

        function init() {
            // Set up scene and camera
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x87CEEB); // Light sky-blue background

            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 30, 50);
            camera.lookAt(0, 0, 0);

            // Renderer setup
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // Ambient light
            const ambientLight = new THREE.AmbientLight(0x404040, 1);
            scene.add(ambientLight);

            // Directional light
            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            directionalLight.position.set(10, 20, 10).normalize();
            scene.add(directionalLight);

            // Plane geometry (to represent the "ocean")
            const planeGeometry = new THREE.PlaneGeometry(50, 50, 50, 50); // Increased segments for wave effect
            const planeMaterial = new THREE.MeshPhongMaterial({ color: 0x1e90ff, side: THREE.DoubleSide, flatShading: true });
            plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.rotation.x = -Math.PI / 2; // Rotate to make it horizontal
            scene.add(plane);

            // Cube for visibility reference
            const cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
            const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
            cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.position.set(10, 5, 0);
            scene.add(cube);

            // Update amplitude and frequency based on input controls
            document.getElementById("amplitude").addEventListener("input", (e) => {
                amplitude = parseFloat(e.target.value);
            });
            document.getElementById("frequency").addEventListener("input", (e) => {
                frequency = parseFloat(e.target.value);
            });

            animate();
        }

        function animate() {
            requestAnimationFrame(animate);

            // Update wave on plane vertices with multiple overlapping waves
            waveTime += 0.05;
            const position = plane.geometry.attributes.position;
            for (let i = 0; i < position.count; i++) {
                const x = position.getX(i);
                const y = position.getY(i);

                // Overlapping waves using sine and cosine with adjustable amplitude and frequency
                const waveHeight = Math.sin(x * 0.1 * frequency + waveTime) * amplitude
                                 + Math.cos(y * 0.15 * frequency + waveTime * 0.7) * amplitude * 0.5;
                position.setZ(i, waveHeight);
            }
            position.needsUpdate = true;

            // Render the scene
            renderer.render(scene, camera);
        }

        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        });

        init();
    </script>
</body>
</html>
>