search

meshcat-dev / meshcat-python

WebGL-based 3D visualizer for Python
MIT License
256 stars 63 forks source link

How to embed meshcat visualizer in a Vue web application? #64

Closed danieljfarrell closed 4 years ago

danieljfarrell commented 4 years ago

Hope you don't mind a question here.

I'm using meshcat to visualise ray-tracing simulations (pvtrace appears in your used by list).

I'm thinking about building a simple web application for the ray-tracer and would like to embed meshcat visualizer within a webpage, hopefully as a VueJS component. However, I'm fairy new to web frontend development and I'm a bit unsure of meshcat architecture and whether it is possible? How would you approach this problem?

rdeits commented 4 years ago

Cool, thanks for letting me know about pvtrace!

Meshcat needs to live in an iframe, so embedding it in a Vue app would probably look a lot like the way we currently embed it in a jupyter notebook. You can see that code here: https://github.com/rdeits/meshcat-python/blob/19217d7dcf44d3c3f23700b0de5407f9ee93a7a5/src/meshcat/visualizer.py#L144-L148

So if all you need to do is embed the meshcat visualizer in a larger webapp, you should be able to copy that structure directly. It won't be a special vuejs component, but I don't think that's a problem--there's nothing in vuejs that prevents you from using regular HTML components inside your application like this.

danieljfarrell commented 4 years ago

Thanks for the comment and not replying sooner! I have not devoted anytime to this yet but I would really like to have a web app version of my raytracer.