Practicing Typescript can be a smooth experience as long as you have a solid grasp on classes and methods; otherwise, your code may encounter issues during execution.
The initial issue: declaring a variable like "mat" in the given manner is incorrect.
let mat = (this.scene.children[4].getObjectByName(intersects[0].object.name)as THREE.Mesh).material.color.setHex("red");
If you wish to store a reference to the object's material correctly, try this approach:
let mat: MeshBasicMaterial = (this.scene.children[4].getObjectByName(intersects[0].object.name)as THREE.Mesh).material;
Regarding the setHex method, it does not have a specific return type. Check out the details of how setHex functions here:
The second dilemma: setHex operates with Hex colors, whereas "red" is just a descriptive term for a color. The hexadecimal code for pure red is "FF0000", which should be used in conjunction with setHex:
setHex(0xff0000)
The third challenge: when casting in Typescript, ensure that each step is done correctly. While you can cast an Object3D to Mesh, attempting to access the "material" property without specifying its type leads to errors. The default Type "Material" does not include a color property, but extensions like MeshBasicMaterial or MeshStandardMaterial do.
To achieve your intended outcome, I suggest using this revised code snippet:
((this.scene.children[4].getObjectByName(intersects[0].object.name)as THREE.Mesh).material as THREE.MeshBasicMaterial).color.setHex(0xff0000);
Feel free to test this adjusted code and let me know if it resolves your issues.