I'm currently developing a web application that changes the color of faces when hovered over by a Raycaster (mouse).
The application includes a functioning .stl viewer and orbital controls.
To test my code using a validated .stl file, visit my GitHub repository. You can easily run it with a live server, which can be set up in tools like VSCode, as explained in the readme.
Although the code successfully changes the object's color entirely, attempting to change the facecolor through the raycaster's intersects method does not produce the desired result. I have already added vertexColors: THREE.VertexColors to the material properties, as recommended.
While the color value shows a change when logging the face's color property, visually, there is no visible alteration upon executing
intersects[i].face.color.setHex(0x0f0f0f)I suspect I may have overlooked or missed something essential, but I am struggling to identify the issue.
Below is my current code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Viewer by Tjalle</title>
<link rel="stylesheet" type="text/css" href="../style/render.css">
</head>
<body>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/build/three.min.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/examples/js/loaders/STLLoader.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/examples/js/controls/OrbitControls.js"></script>
<script>
function init() {
// Code for initializing and rendering the 3D view
}
init();
</script>
</body>
</html>