search

donmccurdy / three-gltf-viewer

Drag-and-drop preview for glTF 2.0 models in WebGL using three.js.
https://gltf-viewer.donmccurdy.com/
MIT License
2.06k stars 530 forks source link

Displaying in Jupyter with local files #325

Closed nolankucd closed 1 year ago

nolankucd commented 1 year ago

Hi, This is a really nice viewer! Thank you for creating it. I'm trying to use it to display glTF files in a Jupyter Notebook which I use as interactive lecture notes. I currently use pyGEL3D to display OBJ files and while basic it gets the job done. I would like to use glTF so I can support animation and materials created in Blender.

I can load hosted glTF files using an iframe.

from IPython.display import IFrame

model_url = "https://www.khronos.org/assets/gltf/BusterDrone.glb"

IFrame("https://gltf-viewer.donmccurdy.com#kiosk=1&model="+model_url, width=800, height=600)

To open local files I have to drag and drop into an empty viewer.

IFrame("https://gltf-viewer.donmccurdy.com", width=800, height=600)

I'm unsure how to specify a local file path instead of the model_url short of hosting the files.

IFrame("https://gltf-viewer.donmccurdy.com#kiosk=1&model=./myfile.glb", width=800, height=600)

Returns an error fetch for "https://gltf-viewer.donmccurdy.com/myfile.glb" responded with 404 obviously.

and

IFrame("https://gltf-viewer.donmccurdy.com#kiosk=1&model=file://Users/$USER/myfile.glb", width=800, height=600)

simply says that the load failed.

Do I need to set CORS for local files? I presume that since I can drag and drop them that the glb files are okay and I'm just making a mess of pointing to the local file.

donmccurdy commented 1 year ago

Hm, that's a great question. I don't think there's any way for a web application on my domain to reach into your hard drive, CORS headers or no. Based on the discussion here, even if the web application were hosted locally, this might be difficult, though there may be important differences between Google Colab and Jupyter Notebooks too.

Instead of using the path on disk, I would try converting the file to a Data URI as shown here:

https://stackoverflow.com/a/73739652/1314762

Then you can pass the Data URI to my viewer instead, replacing image/png with model/gltf-binary for the MIME Type. This approach is kind of non-performant, and inflates the size and cost of parsing the file, but it may work well enough for smaller files.

I'm guessing that there are better ways this could be done locally, without an iframe, using something like https://modelviewer.dev/ instead of my viewer. But I don't know enough about Jupyter Notebooks to provide that answer right now sorry!

nolankucd commented 1 year ago

Thank you for that. I tried it and couldn't get it to work which is probably my lack of understanding. I saw a suggestion else where to use Glitch as a CDN and this works nicely for now with both your three-gltf-viewer and modelviewer.dev.

It would seem that hosting the files is the simplest option so I'll look into longer term solutions.

Thank you again.