Within my three-dimensional application created with three.js, I have implemented a functionality where right-clicking on floors (BoxGeometry) triggers a context menu to select from various textures. While this feature works as intended for a single floor, I am aiming to extend its functionality to cater to multiple floors.
Introducing the first texture and material:
const loaderT = new THREE.TextureLoader();
const texture1 = loaderT.load( './textures/32995.jpg' );
const box = new THREE.BoxGeometry( 25, .3, 25);
const material1 = new THREE.MeshLambertMaterial( { map: texture1 } );
floor1 = new THREE.Mesh( box, material1 );
floor1.position.set(-12.5,0,-12.5);
//similarly set up for additional textures
The function responsible for changing floors is defined as:
function changeFloor(event)
let targetID = parseInt(event.target.id,10);
var texture;
switch(targetID){
case 35:
texture = texture1;
break;
case 36:
texture = texture2;
break;
case 37:
texture = texture3;
break;
case 38:
texture = texture4;
break;
}
ultimateMat.map = texture;
menu.style.display = "none";
}
The unique IDs correspond to selection choices within the context menu. The goal is to dynamically alter the ultimateMat variable based on the specific floor being right-clicked.
In my mouse down function, the current implementation:
function onMouseDown(event) {
event.preventDefault();
var rightclick;
if (!event) var event = window.event;
if (event.which) rightclick = (event.which == 3);
else if (event.button) rightclick = (event.button == 2);
if (!rightclick) return;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects([floor1, floor2, floor3, floor4]);
if (intersects.length) {
intersect = intersects[0].object;
menu.style.left = (event.clientX - rect.left) + "px";
menu.style.top = (event.clientY - rect.top) + "px";
document.getElementById("menuTitle").innerHTML = intersect.name;
menu.style.display = "";
}
else{
intersect = undefined;
}
}
Is there a way to update the ultimateMat variable to material1 upon right-clicking floor1, followed by switching it to material2 for floor2, and so forth?
Appreciate any guidance :)