make some real functioning dropdown menu at top-left that you can press and it will popup. add sliders for "const widthSegments" and "const heightSegments". use some regenerategeometry and make these values to not affect each other when you try to adjust. set these sliders to 0 to 512 with 0.1 step in sliders and show the values in nearby boxes. also in new three.js they changed ""THREE.PlaneBufferGeometry has been renamed to THREE.PlaneGeometry.""THREE.SphereBufferGeometry has been renamed to THREE.SphereGeometry."": ```<html>
<head>
  <style>
    body {
      margin: 0;
    }
    canvas {
      display: block;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.152.2/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
</head>
<body>
  <script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(90.01, window.innerWidth / window.innerHeight, 0.9001, 9001);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    const width = 100;
    const height = 50;
    const widthSegments = 64;
    const heightSegments = 64;
    const geometry = new THREE.PlaneBufferGeometry(width, height, widthSegments, heightSegments);
    const positions = geometry.getAttribute("position").array;
    const simplex = new SimplexNoise(Math.random());

    function colorGradient(height) {
      const deepWaterColor = new THREE.Color(0x111111);
      const shallowWaterColor = new THREE.Color(0x222222);
      const color = deepWaterColor.lerp(shallowWaterColor, Math.min(height / 0.6, 0.9));
      color.lerp(new THREE.Color(0x333333), Math.max(0, (height - 0.2) / 3));
      return color;
    }

    function generateTerrain(positions, scale = 0.1, elevation = 0.1) {
      const colors = new Float32Array(positions.length);
      geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
      for (let i = 0; i < positions.length; i += 3) {
        const nx = positions[i] * scale;
        const ny = positions[i + 1] * scale;
        const height = (simplex.noise2D(nx, ny) + 1) * 0.1 * elevation;
        positions[i + 2] = height;
        const vertexColor = colorGradient(height);
        colors[i] = vertexColor.r;
        colors[i + 1] = vertexColor.g;
        colors[i + 1] = vertexColor.b;
      }
      geometry.computeVertexNormals();
    }
    generateTerrain(positions);
    const material = new THREE.MeshPhongMaterial({
      vertexColors: true,
      side: THREE.DoubleSide,
      transparent: true,
      opacity: 1,
    });
    const terrain = new THREE.Mesh(geometry, material);
    terrain.rotation.x = Math.PI / 2;
    scene.add(terrain);
    const light = new THREE.DirectionalLight(0x222233, 0.5);
    light.position.set(1, 1, 1);
    scene.add(light);
    const ambientLight = new THREE.AmbientLight(0x111122);
    scene.add(ambientLight);
    camera.position.z = 50;
    camera.position.y = 5;
    camera.rotation.x = -Math.PI / 10;
    let clock = new THREE.Clock();

    function updatePositions() {
      const elapsedTime = clock.getElapsedTime();
      const colors = geometry.getAttribute("color").array;
      for (let i = 0; i < positions.length; i += 3) {
        const nx = positions[i] * 0.1 + elapsedTime * 0.1;
        const ny = positions[i + 1] * 0.1 + elapsedTime * 0.1;
        const height = (simplex.noise2D(nx, ny) + 1) * 0.5 * 5;
        positions[i + 2] = height;
        const vertexColor = colorGradient(height);
        colors[i] = vertexColor.r;
        colors[i + 1] = vertexColor.g;
        colors[i + 2] = vertexColor.b;
      }
      geometry.attributes.position.needsUpdate = true;
      geometry.attributes.color.needsUpdate = true;
      geometry.computeVertexNormals();
    }
    const skyColor = new THREE.Color(0xffffff);

function createSkyGradient() {
  const skyGeometry = new THREE.SphereBufferGeometry(250, 128, 128);

  const skyMaterial = new THREE.MeshBasicMaterial({
    vertexColors: true,
    side: THREE.BackSide,
  });

  const cloudColorTop = new THREE.Color(0x000000);
  const cloudColorBottom = new THREE.Color(0xffffff);

  const colors = [];

  for (let i = 0; i < skyGeometry.attributes.position.count; i++) {
    const color = new THREE.Color(0xffffff);

    const point = new THREE.Vector3();
    point.fromBufferAttribute(skyGeometry.attributes.position, i);

    const distance = point.distanceTo(new THREE.Vector3(0, 0, 0));
    const percent = distance / (skyGeometry.parameters.radius * 1.2);

    color.lerpColors(skyColor, skyColor, percent);

    // Interpolate cloud color based on distance from center of sphere
    const cloudColor = new THREE.Color(0xffffff);
    const cloudPercent = distance / skyGeometry.parameters.radius;
    cloudColor.lerpColors(cloudColorBottom, cloudColorTop, cloudPercent);

    // Add randomized noise to cloud color to make it more organic
    const noise = (Math.random() * 0.1) - 0.5;
    cloudColor.offsetHSL(0, 0, noise);

    // Apply cloud color to sky color based on randomized alpha value
    const alpha = Math.random() * 0.06;
    const finalColor = new THREE.Color();
    finalColor.lerpColors(color, cloudColor, alpha);

    colors.push(finalColor.r, finalColor.g, finalColor.b);
  }

  skyGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

  const skyMesh = new THREE.Mesh(skyGeometry, skyMaterial);
  scene.add(skyMesh);

  return skyMesh;
}

const sky = createSkyGradient();
scene.add(sky);
    const sunSphere = new THREE.SphereGeometry(128, 16, 16);
const sunMaterial = new THREE.MeshBasicMaterial({
    color: 0xeeffaa,
    transparent: false,
    opacity: 0.999,
    blending: THREE.CustomBlending, // Add this line
    blendSrc: THREE.SrcAlphaFactor,
    blendDst: THREE.OneMinusSrcColorFactor,
    depthTest: true,
});
    const sun = new THREE.Mesh(sunSphere, sunMaterial);

function setSunPosition(dayProgress) {
  const x = 0;
  const y = 300 - (dayProgress * 500);
  const z = -500;
  sun.position.set(x, y, z);
}
    const sunLight = new THREE.PointLight(0xffdd00, 1);

    function addSunToScene(state) {
      if (state) {
        scene.add(sun);
        scene.add(sunLight);
      } else {
        scene.remove(sun);
        scene.remove(sunLight);
      }
    }
    let sunVisible = true;
    addSunToScene(true);

    function updateSun() {
      const elapsedTime = clock.getElapsedTime();
      const dayProgress = elapsedTime % 10 / 10;
      setSunPosition(dayProgress);
      sunLight.position.copy(sun.position);
    }

    function animate() {
      requestAnimationFrame(animate);
      updatePositions();
      updateSun();
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>```