Recently, I've delved into Javascript and started exploring three.js. I created a custom Geometry to form a triangular prism, which looks correct initially. However, upon rotation, some of the faces appear distorted. Interestingly, the pre-built geometries like CubeGeometry and CylinderGeometry behave as expected. Is this issue related to my custom Geometry, lighting setup, or perhaps the Mesh or Material configuration?
For reference, here's a fiddle demonstrating the problem: 3D Shapes Fiddle
Below is the key code snippet:
function getTriPrismGeometry(){
// Custom Geometry creation
}
function init(geometry, isCustom) {
// Initialization function for rendering
}
function animate() {
// Animation loop using requestAnimationFrame
}
function render(){
// Logic for rendering with rotation and position adjustments
}
I'm relatively new to three.js and 3D rendering in general, any guidance or suggestions on resolving this issue would be greatly appreciated. Many thanks in advance!