Grasshopper to Three.js (view rhino models in a web browser?)

Hello all,

I was just curious if anyone else was looking into creating objects in Grasshopper that could be viewed in a html webgl canvas...

if this could be done like the ghowl component, export to kmz, and it would be perfect.

You could have parametric models, and share them in a web viewer. (such as this one)

https://github.com/mrdoob/three.js/

I have found one exporter, so it might be possible to create a grasshopper component

http://www.virtualshape.com/en/download that referenced this tool.

but I would like to know if anyone else was looking for a way to view rhino/grasshopper models in a web browser, and if there might be a way to do this already.

thanks!

Replies to This Discussion

Permalink Reply by Andrew on April 26, 2012 at 10:15am

This website can do exactly what you want! It can directly show converted Rhino models (using a small tool they provided) in browser without any plugin.

Permalink Reply by Richard Schaffranek on September 6, 2012 at 9:57am

Within Three.js there is an python export utility, With a little bit of adaption I am shure this can be converted to a three.js exporter. Let me know if you indent to do that, otherwise I will give it a go in about a month or so..

Richard

Permalink Reply by Christian Schmidts on September 6, 2012 at 12:21pm

I thought about the same thing as working on my website at the moment. interesting links guys!

but of course it would be a different quality to have the ability to interact, have sliders and to able to show more process oriented sketchs like in processing.

so antoino i m very curious with what you want to come up with.. :-)

also it would be interesting to hear from the developer if something like this is intended for future releases..

Permalink Reply by Antonio Turiello on October 19, 2013 at 11:25am

Hi ben Fruehling,

I'm studying an easier way to visualize and interact with generative shapes on the web:

GRASSHOPPER GROUP

Permalink Reply by Alessio Lombardi on February 26, 2015 at 12:11pm

I'm very interested too. I'm trying to build my own component to convert a Mesh to Json, but I am encountering problems due to the different order of the vertices. Any tips?

Permalink Reply by Arend on February 26, 2015 at 2:34pm

I've created an export to JSON in the past. I remember the vertices order to be exactly the same. Perhaps there's something else wrong?

Permalink Reply by Richard Schaffranek on February 26, 2015 at 2:39pm

Could you specify the problem?

Permalink Reply by Alessio Lombardi on February 27, 2015 at 6:09am

Thanks, my bad. I forgot to implement the type bitmask, and I wrongly checked the order of the vertices needed in Three, thus thinking that was an arrangement problem. Thank you for the feedback.

Permalink Reply by martyn hogg on February 26, 2015 at 3:09pm

If you could wrap a GH def into a web page it would be amazing for "Design your own" 3d printed parts like they have done so well in this web page...

n-e-r-v-o-u-s.com

https://n-e-r-v-o-u-s.com/kinematics/?t=0

Permalink Reply by Kim hauer on February 26, 2015 at 4:16pm

The definition Web Dialogs appears to be the name for that interaction.

For example until recently the SketchUp Ruby API was lacking a web interface. Until simple existing HTML tools were added to the API which allowed script developers to create their own dialog input boxes, this allowed users to interact with a script directly. In Rhino it would mean not relying upon the 25 year old Rhino/Autodesk Command line interface. This would be a huge plus for GH2.

my 2 cents.

Permalink Reply by Alessio Lombardi on February 27, 2015 at 6:11am

Thanks for your answer. Sorry, do you mean 'Web Dialogs' it's just the correct name, or also that there is already some work in this direction for GH? I'm looking for something that implements something like an API to control parameters in GH by the Web. Right now I only found these:
http://www.grasshopper3d.com/forum/topics/rhino-grasshopper-as-slav...
http://www.grasshopper3d.com/group/ladybug/forum/topics/new-develop...
I was wondering how I could take a first approach to this problem, maybe just implementing some js/jQuery. Still new to these IT, so any hint would be appreciated.

Permalink Reply by Matthew Naugle on April 20, 2015 at 10:00am

Hi Alessio (and anyone else following this 3 year old thread!)

Our group has done quite a bit working with 3.js and Grasshopper. One project which allows you to live stream a meshed grasshopper model to a web browser is Playpus. It also allows you to stream actual geometry between participants in a shared 'session' along with publishing your sliders for others to control. This project is not open source, so for the time being, the functionality is what has been released in the plugin.

http://www.grasshopper3d.com/group/corestudio/forum/topics/announci...

http://www.food4rhino.com/project/platypus?ufh

The second method which does not allow for pushing sliders to the web interface, but allows you to create json of your meshed GH geometry is the open source project va3c. This may be a good jumping off point for any of your specific goals. There is code for the Grasshopper components, and simple webviewer you may use to view that json at the link below.

http://va3c.github.io/