I'm working on a ThreeJS game that utilizes cubes as the main play pieces. Each cube has a custom image loaded from a specific JPG URL on one of its faces. Now, when a new game starts, I want to be able to simply swap out the JPG image assigned to each cube face. Is there a way to achieve this without having to completely rebuild each cube? I'd prefer to avoid that because cleaning up a ThreeJS scene and releasing GPU resources can be quite complex according to my research (including the need to remove all references to mesh components).
Here is an example of how I create the cubes:
function makeCardCube(cardImageUrl, textureBackSide, locX, locY, locZ, width, height) {
let thickness = 0.01 * width;
let cubeGeometry = new THREE.BoxBufferGeometry(width, thickness, height);
let loader = new THREE.TextureLoader();
let materialArray = [
new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
// Card face.
new THREE.MeshBasicMaterial( { map: loader.load(cardImageUrl) } ),
// Card back side.
new THREE.MeshBasicMaterial(
{
map: textureBackSide
}
),
new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
];
cube = new THREE.Mesh( cubeGeometry, materialArray );
cube.position.set(locX, locY, locZ);
// Rotate the card 90 degrees upwards around the X axis so it faces the camera.
cube.rotateX(THREE.Math.degToRad(90));
return cube;
}