A component in the interface with cutouts added
This week I spent trying to fix the issues that I have been working on the past couple of weeks. After spending a considerable time reading documentation and trying out different things in the code, I was able to make the cutouts appear in the 3D view of the interface. The bug I had been encountering was due to a weird quirk in the way geometries are represented in Three.js, the rendering library we are using for the interface. By convention, most libraries use the right hand rule to represent faces as a list of coordinates. Coordinates are listed in a counterclockwise fashion around the edge of the face. This was the method that RoCo uses internally, and that we had been using with Three.js up until now. For some reason, however, when adding holes, Three.js expects the face to be defined in a left-hand fashion, while the hole is defined in a right-hand fashion, the opposite of one would expect. While this was an odd issue, the face seem to be displaying properly now. I also changed some of the other display code by updating to a new version of Three.js, and using some newer API calls that allowed us to simplify the code. Currently, I am working on adding UI elements to allow the user to specify offsets and other parameters to customize the cutouts that are added.