I've been struggling with this issue for quite some time now. I am in the process of creating a game, and the main map is a model in obj format. I load it using the following code snippet:
var objLoader = new THREE.OBJLoader();
objLoader.setPath('Assets/');
objLoader.load('prison.obj', function(prison){
prison.rotation.x = Math.PI / 2;
prison.position.z += 0.1;
prison.scale.set(15, 15, 15)
scene.add(prison);
});
Initially, when loading a smaller version of the same model, everything worked fine. However, as I added more details to the model, making it larger, WebGL started throwing the following warning: [.WebGL-0x7fb8de02fe00]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1. This warning appears 256 times before WebGL stops and says WebGL: too many errors, no more errors will be reported to the console for this context.
https://i.sstatic.net/hExFK.png
Due to this warning, my model fails to load completely. In the Preview, the model looks like this, as expected:
https://i.sstatic.net/YQ9Sf.png
However, in Three.js, the model appears different:
https://i.sstatic.net/qdzX0.png
At this point, I'm unsure about what might be causing the issue:
- It could be due to using OBJLoader CDN
- The size of my model might be too large
- Maybe I am missing something crucial
Any assistance would be greatly appreciated. Please let me know if you require more information.