Help with 3D Viewer babylon


#1

Hello all,

I am really noob at coding. I have been investigating for hours and I dont find the solution to my issue. Here I go:

I would like to show 3D Models (*.babylon and *.obj files specially) from a webserver. I found a good viewer from babylon web called sandbox (https://sandbox.babylonjs.com/).

I downloaded its code and I have been trying to eliminate user input file and load a 3D model automatically but I cant.

So, I decided to upload a random model, and I saw the textures werent assigned, so I had to assign it, looking for the .jpg. and, although it lets you to upload .obj models, i uploaded some of them and they werent showed in that viewer. Finally I would like to rotate the camera with the mouse around the object (not fixed vector, as in this viewer https://3dviewer.net/ for example.

So, could anyone help me?

Thanks in advance


#2

The reason OBJ files textures aren’t assigned, is because an OBJ file has materials MTL in a separate file. On a webserver it will work, because the materials will be subsequently requested. Look in the dev tools console when you load an OBJ file with a material:

I just uploaded an OBJ file and it was showing in the sandbox.

That looks like an ArcRotateCamera with target to center of mesh.

So, build your website locally and serve it from a webserver (like static express or anything) then use SceneLoader to load the models on your local webserver. Follow the BabylonJS 101 to build your webpage:
https://doc.babylonjs.com/babylon101/first


#3

Hello [brianzinn]

Thanks for replying. I checked console and it appears the same error as yours. So, on a webserver it will work, thanks.

Then I uploaded some obj files and they werent showed. I downloaded others free obj and they werent showed either. It appears just a dark blue scene.I checked console and I didnt see any error.

Could you upload an obj file you can show on sandbox?


#4

Do you have errors in the console for these files?


#5

I was using from here https://people.sc.fsu.edu/~jburkardt/data/obj/ the OBJ file ‘power_lines.obj’ on the sandbox. The mesh loaded and correctly produced the missing MTL file error.


#6

Hello [Deltakosh]

No, I dont have any strange error when I upload an obj file, but mtl file error. Could I autoload the mtl from local?

anyway, I try to upload a 202mb obj file, and it appears a black blue screen


#7

Hello [brianzinn]

I tried these obj files and they are showed. in other viewer I can see my obj file, except in sandbox. Could be a weight problem?

And How could I delete user input for upload files, in order to autoload the file I want. I am trying it without any result.

I appreciate any help
Thanks in advance


#8

You can use the SceneLoader to load the file you want from your server. The root directory parameter will contain the MTL file and it should load in your scene with materials. If you are unable to get that working then can you post code or a github repo?

edit: have you looked at scaling your model? can you share your model?


#9

Hello [brianzinn]

I am going to write step by step. I am testing sandbox viewer from local. I am able to upload big .babylon files. (500 mb so far) but the texture is not automatic loaded. I show the model with red square textures. it shows this errors:

Failed to load resource: net::ERR_FILE_NOT_FOUND Logo_Fullscreen.svg:1
Failed to load resource: net::ERR_FILE_NOT_FOUNDVisor%203D%20babylon.html:1
Access to image at ‘file://nadirservidor/IDI/WEBGL/web/Pruebas%20Dani/BABYLON/WEB%20BABYLON/vuelo_entero_texture.jpg’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
vuelo_entero_texture.jpg:1
Failed to load resource: net::ERR_FAILED
babylon.js:16 BJS - [09:16:15]: Error while trying to load image: file:vuelo_entero_texture.jpg
e._ErrorEnabled @ babylon.js:16

So I have to go to scene explorer–>textures and look for it. Then it appears correctly (so i think it must load textures from local).

I have tried to upload a 202 mb and a 134 mb obj files (which I cant share) and they are not showed. the console says this in both:

Failed to load resource: net::ERR_FILE_NOT_FOUND Logo_Fullscreen.svg:1
Failed to load resource: net::ERR_FILE_NOT_FOUND babylon.js:16
Access to XMLHttpRequest at ‘file://nadirservidor/IDI/WEBGL/web/Pruebas%20Dani/BABYLON/WEB%20BABYLON/SE.mtl’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

and know I am trying to delete user input and load the model I want,

I have tried to eliminate this:

But it doesnt work.


#10

I think one of the problem is that svg is not a supported file format


#11

If you serve that over HTTP and use SceneLoader it will get all the remaining assets from the root URL. Did you try my comment from 5 days ago?