Is there any known limit about mesh size to render with three.js?

Hi,

Recently I started to add a 3d model viewer to my project. I did some comparison between Three js and BabylonJS to find which one better fits to my needs.
In my comparison I found working with Three js is some how easier for me.

But now after a few test I have a problem loading a GLTF file including some heavy meshes.
I have tried GLTF loader with Three js and it works fine. I also tested some other GLTF files and have no problem with those lighter files.
But with this file (it has just few mesh objects but about 60MB of data) I can not see any part of mesh in my render view (I added a simple box object and can see that box to prove render viewer is working).
I can prove file loaded completely and there is no error during file load. I also have access to mesh data from my js code and can read mesh information like its geometry data and material.
But when I move camera and target it to the mesh position I can not see anything in the viewer.
I am aware about camera far and near limits and have been set camera to far value about 5000 so it is much higher than my camera distance to the object.

I made same test with Babylon js and I can see the mesh in Babylon. Also in Vscode I tried GLTF viewer plug in and I can switch Three js viewer or Babylon js and I can see my model in both Babylon and Three js.

So I’m asking about any possible limits for renderer to show such high density mesh?

Has anybody same problem and is there any hint that help me find my problem resolution?

I’d suggest trying your model in viewers like https://gltf-viewer.donmccurdy.com/ or https://gltf.report/ first, to get a sense of whether it appears correctly and performs well. If it works in these viewers then you can probably assume the problem has something to do with how your application is loading the model or positioning the camera, rather than with the model itself.

There’s no hard limit on mesh size, but any particular computer will have limits. 60MB may be a lot or a little — it has more to do with the number of vertices and size of textures, than with the number of megabytes.

@donmccurdy Thanks for your guide, I tried both links you mentioned and there were no problem in my file.
As I explained in my first post I can see file content by other viewers like Babylon js and also I’v checked the file by Vscode GLTF plugin before.

Now I’m thinking about how mesh object position have been changed from my original .obj file when I converted it to GLTF.

May be source of my problem is hidden in changing a Z-UP file to a Y-UP file?

I’m investigating to my objects position and trying to address camera manually by position I calculate myself.
I hope this solve the problem but I will report my test result later.

If you’d like, you can see how my viewer positions the content and the camera here:

@donmccurdy Too many thanks for your followup and showing valuable piece of code.

But let me describe what strange I found in my file conversion.
To do file conversion I used blender 3.4.1 on my linux machine. When I converted a file imported from a .dxf source file I could see it correctly in Three js but when I converted from an .obj file I have problem.

both .dxf or .obj files when imported to blednder show their models correctly and when I export GLTF or GLB file from both source I can see them in Vscode GLTF plugin previewer (in Babylon viewer and Three js viewer) but in my project when I use Babylon I can see both exported files correct but with Three js I can see file converted from .dxf correctly and have problem with file converted from .obj???

To have some clue when GLTF loader in Three js fire its load completed function I add a simple box for each mesh loaded exactly in mesh geometry.boundingSphere.center
SO I can see those boxes in place but can not see the mesh object itself.
I tried to set mesh.visible = true and mesh.material.opacity = 1 to be confident if material or visibility make problem.
even I changed mesh.material with a temporary two sided solid color material and had no success.

It seems to me strange and the only explanation in my mind is rotation of objects due to Z-up and Y-up

Does it make sense to you also?

Conversions between different formats never just work… objects change scale, up axes are switched, materials lose properties and textures, and sometimes there are old fashioned software bugs. If you’re planning to export a glTF file from Blender, the best advice I can give would be to check the file (in Blender) and make sure that it looks as expected, at the correct scale, and that the materials are set up as described in the Blender glTF addon documentation.

@donmccurdy I’m completely agree with you about problems due file conversion, but as I mentioned above I checked validity of both dxf and obj files in blender before re-exporting to gltf and glb.
Also after conversion I check both converted formats with Vscode GLTF plugin and Babylon js

The strange point for me is how Three js shows file converted from dxf but does not show what converted from obj file source.

Anyhow, I will follow my test by reading more object info from both conversion to find what changed in between.

Thanks again for your time and help.