Changing image texture using a selection of buttons

Questions
1

I have a scene where I have floor with an image textured to it, and I have buttons that when clicked change the texture. Currently I’m using a function to load the floor geometry and image

   function loadFloor(floor){

 var groundTexture = new THREE.Texture();
var imageLoader = new THREE.ImageLoader(  );

imageLoader.load("textures/" + floor, function ( image ) {
    groundTexture.image = image;
    groundTexture.needsUpdate = true;
    groundTexture.wrapS = THREE.RepeatWrapping;
groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set( 4.5, 9 );
} );

 var groundMaterial = new THREE.MeshPhongMaterial( {
    specular: 0x122222,
    shininess: 10,
    map: groundTexture,
} );

var geometry = new THREE.BoxGeometry( 50, .3, 50);
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, groundMaterial );
scene.add( cube );
}

and this is loaded in init():

loadFloor(“Wood_floor_dark.jpg”);

I’m using elementIDs with my buttons (id 35-39)

for (var x = 35; x<39; x++){

document.getElementById(x).addEventListener(“click”, changeFloor, false);

}

To change the flooring I’m using a function that uses a switch statement and the original function:

function changeFloor(event){
let targetID = parseInt(event.target.id,10);
var floor;
switch(targetID){
case 35:
floor = “textures/32995.jpg”;
break;
case 36:
floor = “textures/blueFloor.jpg”;
break;
default:
floor = “textures/Wood_floor_dark.jpg”;
}

loadFloor(floor)

}

This is working grand but I don’t know if it’s exactly efficient as I’m loading new geometry each time, is there a way just to change the image texture?
The fiddle here uses material.map = texture2; texture1.dispose(); but I’m struggling to implement something similar to my code. Edit fiddle - JSFiddle - Code Playground

2

*note that default in the switch statement is doing nothing, meant to // it

3

If you only want to exchange a texture, creating a new geometry, material and mesh is indeed inefficient.

What you see in the fiddle is the recommended approach. Meaning just replacing the texture object with a new one. Calling dispose() is recommended if you never need the old texture again.