I am new to three.js and the realm of 3D graphics. My goal here is to delve into the learning process.
My aim is to showcase a dodecahedron with a metallic appearance, but I'm encountering an issue where about half of the faces are appearing black and lack reflection. The other faces seem to be displaying correctly.
While I know there are predefined functions for generating a dodecahedron and calculating normals, I prefer to do it manually to solidify my understanding.
Initially, I suspected that the problem might lie with the vertex normals, but upon using the VertexNormalsHelper, it seems like all normals are pointing in the correct directions.
Can anyone provide some guidance on where I might be making a mistake? Appreciate any help!
Snippet of the Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>shiny dodecahedron</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- Add your styling here as per requirement -->
</head>
<!-- Continue with rest of the HTML and JavaScript code... -->