Loading large obj - no render visible

[PrzemekP]

Hi.
I’m trying to get along with three.js and it went quite well till I’ve tried to load my custom obj object with mtl.
It looks like it loads ok, but I can’t see any result on page. It is bearly visible on a 2K screen, but nothing is visible on standar 1080p FullHD.
Showcase can be found Here
Probably it depends on ratio as the textures file is over 8000x8000 pixels.
Any thoughts how to fit this object on screen ?

[Mugen87]

You can automatically center the object and adjusting camera parameters by using an approach outlined here:

How to dynamically adjust the camera in three js

One way to solve this issue is by changing camera parameters based on the bounding box of your mesh. This approach is used by viewer application like the three.js based gltf-viewer. Check out the following code listing for more information: The code also centers the object which is probably not required in your scene.

[PrzemekP]

Still no luck with this issue.
I don’t want to go throught the three modules code, as I am not at this level. If anyone has any kind of solutions which will work on the code I’ve provided on the showcase I’ll be delighted.
If rendering such large objects in three is a problem I have to fine another library.

[mjurczyk]

@PrzemekP

I have to fine another library

1. You can, but keep in mind that all - Three / Babylon / Pixi - work on WebGL. Changing the library changes the API slightly, but the result will likely be the same.

2. For what I can see, the problem is not that your model is incredibly big - it’s actually the opposite, as it seems to be incredibly small. Also, some comments for the code:

• I imported your cube to Blender and it’s size seems to be (0.5, 0.5, 0.5), that is small. Like, very small. And you move the camera 300 units from it. And 95 below it :’) You may need either to zoom in on it, make it larger, or place the camera closer to make it visible.
• You call controls.update(); only once. To make it work properly, you must call it on every frame. See here.
• It’s not possible to use camera.lookAt and OrbitControls at the same time. Orbit controls override any changes you do to the camera.
• Setting controls.target.set( 0, 50, 0 ); makes it look up, but not up-enough to see the model. It may be best to place the model at the (0, 0, 0) position and move the camera around, otherwise it’s easy to get lost in the 3D space.

Here’s a small fiddle based on your code (Copied the source from your index.html. It doesn’t use your cube though, it would take too long to set up, sorry.)

On a separate note - if your model pushes texture / size to the limits, be sure it does not go beyond your WebGL capabilities - you can find them on https://webglreport.com.

[PrzemekP]

Thanks for reply. Unfortunatly the object in showcase was changed during some test. Now it has proper object files. (hakens.mtl / obj).
I was using code form three examples pages, so I’ve assumed that it has to be correct code.
Unfortunatly I’ve changed the code as you have shown on fiddle but with no effect.
Could you take another look, this time with correct Object ?? I’ll be more then grateful.

[mjurczyk]

When trying to import the new model to Blender it throws an error, I can’t tell you if the size is better right now.

1. It may make debugging easier to change scene.background to some color. If the material from the object is loaded incorrectly it appears black - you won’t be able to see it on a black background. (Tested your model with an online viewer and it seems valid, though.)
2. If you are sure the object loads correctly, it should be enough to move the camera along z axis until the object is visible. You’d be doing manually what the code linked by @Mugen87 does.

[PrzemekP]

Changing scene.background was great idea. It seems that the object was loading, but no textures where loaded.
It is also strange that Blender shows an error while importing this model. Have to look at this also.
Now I’m at least one step further to fire this up.