try fix “ReferenceError: regenerateGeometry is not defined” when trying to adjust “Width Segments Height Segments Width Height”. also, Width and Height do change but it looks as they reset each other when trying to adjust. also rotation slider doesn't work. output full code, without shortage. also I have fixed errors in new version of three.js ""THREE.PlaneBufferGeometry has been renamed to THREE.PlaneGeometry."

"THREE.SphereBufferGeometry has been renamed to THREE.SphereGeometry." don't rename it.: <html>
<head>
<style>
body {
margin: 0;
}
canvas,
.control-panel {
display: block;
}
.control-panel {
position: fixed;
left: 1em;
top: 1em;
background-color: white;
padding: 1em;
border-radius: 5px;
z-index: 10;
}
label {
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>
<div class="control-panel">
<label>
Terrain Color
<input type="color" id="terrainColor" />
</label>
<label>
Transparency
<input type="range" id="transparency" min="0" max="100" />
</label>
<label>
Width Segments
<input type="range" id="widthSegments" min="1" max="100" />
</label>
<label>
Height Segments
<input type="range" id="heightSegments" min="1" max="100" />
</label>
<label>
Width
<input type="range" id="width" min="1" max="1000" />
</label>
<label>
Height
<input type="range" id="height" min="1" max="1000" />
</label>
<label>
Camera X
<input type="range" id="cameraX" min="-100" max="100" />
</label>
<label>
Camera Y
<input type="range" id="cameraY" min="-100" max="100" />
</label>
<label>
Camera Z
<input type="range" id="cameraZ" min="-100" max="100" />
</label>
<label>
Y-Axis Rotation
<input type="range" id="rotationY" min="0" max="360" />
</label>
</div>
<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);
let width = 500;
let height = 100;
let widthSegments = 10;
let heightSegments = 100;
let geometry = new THREE.PlaneGeometry(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.SphereGeometry(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();

// New code starts here
function updateTerrainColor(color) {
material.color.set(color);
}

function updateTransparency(value) {
material.opacity = value / 100;
}

function updateWidthSegments(value) {
widthSegments = value;
regenerateGeometry();
}

function updateHeightSegments(value) {
heightSegments = value;
regenerateGeometry();
}

      function updateWidth(value) {
        geometry.dispose();
        geometry = new THREE.PlaneGeometry(value, height, widthSegments, heightSegments);
        updateGeometry(geometry);
      }

      function updateHeight(value) {
        geometry.dispose();
        geometry = new THREE.PlaneGeometry(width, value, widthSegments, heightSegments);
        updateGeometry(geometry);
      }

      function updateCameraPosition(x, y, z) {
        camera.position.set(x, y, z);
      }

      function updateGeometry(newGeometry) {
        terrain.geometry = newGeometry;
        const positions = newGeometry.getAttribute("position").array;
        generateTerrain(positions);
      }

      document.getElementById("terrainColor").addEventListener("change", (e) => {
        updateTerrainColor(e.target.value);
      });

      document.getElementById("transparency").addEventListener("input", (e) => {
        updateTransparency(e.target.value);
      });

      document.getElementById("widthSegments").addEventListener("input", (e) => {
        updateWidthSegments(e.target.value);
      });

      document.getElementById("heightSegments").addEventListener("input", (e) => {
        updateHeightSegments(e.target.value);
      });

      document.getElementById("width").addEventListener("input", (e) => {
        updateWidth(e.target.value);
      });

      document.getElementById("height").addEventListener("input", (e) => {
        updateHeight(e.target.value);
      });

      document.getElementById("cameraX").addEventListener("input", (e) => {
        updateCameraPosition(e.target.value, camera.position.y, camera.position.z);
      });

      document.getElementById("cameraY").addEventListener("input", (e) => {
        updateCameraPosition(camera.position.x, e.target.value, camera.position.z);
      });

      document.getElementById("cameraZ").addEventListener("input", (e) => {
        updateCameraPosition(camera.position.x, camera.position.y, e.target.value);
      });
    </script>
  </body>
</html>