The reason why the model was seen as inside out when rendered was because the side
was the wrong one and since there was a large number of vertices joined together simply assigning THREE.FrontSide
didn't help with it. So from the information I gathered, in THREE.BufferGeometry
whether a triangle is rendered as FrontSide or BackSide depends on the winding order of the vertices. So I flipped all the values in the triangleTable
(the triangleTable consist of three edges of the triangle, may contain multiple triangle values so flipped here doesn't mean total reversal just the triangle edges, so 3 each until the end). If the winding order is in Counter Clock Wise then FrontSide will be shown and BackSide when the order is Clock Wise.
I used the lookup table from https://gist.github.com/dwilliamson/c041e3454a713e58baf6e4f8e5fffecd
and ran this code block to flip the values
const transform = [];
let i = 0;
let j = 0;
for(i = 0; i < 256; i++){
transform[i] = [];
for(j = 0; triangleTable[i][j] != -1; j += 3) {
transform[i][j] = triangleTable[i][j + 2];
transform[i][j + 1] = triangleTable[i][j + 1];
transform[i][j + 2] = triangleTable[i][j];
}
transform[i][j] = -1;
}
console.log(transform);
Also I would like to know why people have downvoted my question and didn't even leave a comment on why they did that. Although that motivated me to find the answer myself I don't thank you.