How to remove jagged edges from a 3D model

Questions
1

I am trying to render a .OBJ model from sketchfab , i can see the model rendered but i see some errors in the JS console. Firstly, i can see a warning
‘Three.WebGLRenderer : Image is not a power of two(2500x1667). Resized t0 2048x1024’ . In addition, i also get some errors namely : Failure to load resource : the server responded with a status of 404 (Not found)
Examples/3d-ob/assets/Map_400_Mix.tga:1 and Failure to load resource : the server responded with a status of 404 (Not found)
Examples/3d-ob/assets/402_Speckle.tga:1

When i render this model in the browser, i can see it but when i rotate it ,i can see some edges jagged
It would be helpful to understand the below questions:

  1. The warning mentioned resizing the image, is this the reason why my image appear jagged ? ( I have set antialias: true in THREE.WebGLRendere) How do i fix this ?Is there some kind of post -processing that i need to take care of?
    2)The model renders but i get some missing files errors - speckle.tga and Map_400_Mix.tga . I looked into the ,mtl file and can see these files mentioned there but dont see them in my exported folder. Can i get help understanding this ?
    3)My exported folder from sketchfab also has some addtional .jpg files which are not referenced inside the .mtl or .obj file, how do i incorporate them in my code. Th jpg files has the keyboard mask and screen images in them which would improve overall look of the model
    Adding the model for reference
2

You’ll need to share enough details (code and models, or a demo) for others to reproduce these issues.

Also note that all models on Sketchfab are available as glTF files, and that glTF is the recommended format for use with three.js. It’s pretty common to run into issues like incorrect texture references in OBJ/MTL files.

1 Like
3

Thank you for getting back to me. I tried working with glTF files and that indeed help resolve the issues mentioned above !

1 Like