maybe you can put some drpdown menu at left-top to adjust all colors plus their actual transparency values plus widthSegments and heightSegments plus const width and const height plus camera.position x y z. make some sliders by createlement and place all this control menu code somewhere at bottom or top of the main code. rearrange and reformat all this code properrely, so all be on their corresponding places. output full code, without "same as original", "same as before" etc:

<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 = 500;
const height = 100;
const widthSegments = 10;
const heightSegments = 100;
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>