Babylon.js Viewer without server (kiosk mode)

Don’t mean to add more unanswered thoughts into this thread, but - the viewer supports the file protocol, which will work with local file. so if you reference the file using the file schema (file://LOCATION/file.ext) it should work offline without a problem.

RaananW : thanks but bghgary’s solution works already

It’s possible to load data modet or data texture with no server (see examples above).

What I m trying to do now is to
1-load model without server , (done here : https://playground.babylonjs.com/#7F6S08#2 )
2-load texture without server , (done here : https://playground.babylonjs.com/#7F6S08#10 )
3-apply texture 2 to object 1 . Still looking for a solution.

I know solutions with
camera.target.material = material ;
or
mesh.material = material;

but I can’t use it when model is imported on scene with SceneLoader.Append

I totally understand that it works, but it seems to me like you will have a hard time making large models work correctly. All materials / textures need to be initialized, and assigned to their respectful objects.

If you allow local files loading using chrome (chrome.exe --allow-file-access-from-files) you can use the file protocol straight from the viewer, without the need for code manipulations. Of course a small warning - only use this flag when running chrome on a trusted device!

To answer your direct question - this is how it would work (notice lines 21/22):

https://playground.babylonjs.com/#7F6S08#11

But I personally find this unmanageable.

1 Like

RaananW
I tried with big files (40Mo) model I converted to base64 to put them in javascript variable.
It works perfectly in browser and perhaps a bit faster than imported data files.

The problem is that common code editors (I use Netbeans) don t work with big files. They re becoming too slow.

So I used EmEDitor professional version (40$/year).
You can work on big javascript files with it and it has base64 conversion functionnality.

Thanks a lot with your answer.
I mysel was at scene.meshes[0].material = material; in my search
and you bring me the solution with
scene.meshes[1].material = material;

It s good for me. Resolved

Hi again,

Do you think, il could be possible to build same off-server player
https://playground.babylonjs.com/#7F6S08#11

but with .obj model (+texture) instead of .glb file ?

Of course, the viewer will work with obj files as well, as long as you have the loader for it.

But on https://playground.babylonjs.com/#7F6S08#11 example, I see how I can load model and texture
(another question is : this exactly the same script for .obj ?).
But with obj models, beside .obj file and .jpeg file, there is a 3rd file : a .mtl file.
How to transmit this file to babylonjs viewer/loader ?

MTL file is usually defined in the .obj file (#usemtl if I am not mistaken). Babylon will load this .mtl file (relative to the .obj file), and will also load all of the associated textures. of course, we expect the .boj file to be formatted correctly, otherwise it won’t work :slight_smile:

1 Like

I tried
but then
I got this message from brower javascript console :
Access to XMLHttpRequest at 'file:///D:/WWW/.../Nucleus.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.

Perhaps your obj has an absolute local file path for the mtl reference? Can you share your obj/mtl and how your server is set up to serve the files?

THis player 3D must work without server AND the browsers do no accept to load local files (CORS restriction).
Or the mtl file can be passed as a javascrit variable or it’s impossible.

I’m not sure what you are trying to do. Maybe you can load from local files if you put them in the FilesInputStore and load them using file: syntax?

Either way, the obj itself still needs to point to the mtl using relative paths. It’s hard to help you without seeing what you are doing.

EDIT: just realized your title (which i read before but didn’t read this round) :smirk:

That’s an interesting issue :slight_smile:

The mtl loader is using Tools.LoadFile to load the .mtl file. this function supports data URLs. So technically, you could encode your .mtl file as a base64 string inside the .obj file, and instead of a file of http URL you could use the base64.

“you could encode your .mtl file as a base64 string inside the .obj file”
OK but how could I do that ?
.mtl should be include in .obj from Blender ?

I don’t think this is a good idea. The obj will no longer be valid.

The mtl url is defined in the.obj fine as a url. So instead of the url you encode the file and replace it with a data url - Data URLs - HTTP | MDN

3 Likes

It works !!

1 Like

I stand corrected. :slight_smile:

2 Likes

last question (I hope so :slight_smile: ).

I would like to control touchpad sensitivity.
I added

camera.pinchPrecision = 60

in line 23 of Babylon.js Playground ,

This worked on anterior common server 3D player but with this babylon.viewer.js, it doesn’t

Any idea ?

Solution here : Babylon.js Playground

3 Likes