I am striving to implement a button that toggles between different terrain-generating functions and removes the previous terrain. The current issue I am facing is that the planes stack on top of each other. You can see an image of the problem here.
There are two functions for generating terrain - one creating lava-type terrain, and the other cobblestone terrain. Each function has been encapsulated within its own block.
function lavaGround() {
const planeLava = new THREE.Mesh(
new THREE.PlaneGeometry(200, 200, 512, 512),
new THREE.MeshStandardMaterial({
//irrelevant code
})
);
scene.add(planeLava);
}
function cobbleGround() {
const planeCobble = new THREE.Mesh(
new THREE.PlaneGeometry(200, 200, 512, 512),
new THREE.MeshStandardMaterial({
//irrelevant code
})
);
scene.add(planeCobble);
There are buttons in place which successfully add the new terrain to the scene:
let cobbleButton = document.getElementById("cobblestone");
cobbleButton.addEventListener("click", cobbleGround);
let lavaButton = document.getElementById("lava");
lavaButton.addEventListener("click", lavaGround);
However, when attempting to remove the other terrain using scene.remove, the removal process did not work as intended. Further adjustments were made by trying to consolidate all terrain-related operations into a single function, but this also failed to yield the desired outcome. Any insights or suggestions would be greatly appreciated. Thank you!