In the world of three.js, imagine having a 3DObject that looks something like this:
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
This mesh is special because it's dynamic - the user can adjust its size, which changes the scale of the mesh.
widthInput.subscribe(value => this.mesh.scale.x = +value); // just to get the idea
Now, I've heard that you can assign different materials to different sides of the geometry. I've also heard whispers about being able to set materials on specific sections of the geometry's sides (if there were more sections).
Here's the catch: the user can adjust the width between 200 and 260, but I need a distinct material on the far right of the mesh, with a fixed width of 10. How would I achieve this without creating a whole new geometry? Is there a method to apply a material to the fixed part of the mesh? Or could I somehow designate one segment to always have the fixed size? Help would be greatly appreciated.
Visual representation of the dilemma (white area needs a fixed width of 10 while the red area adjusts):