Grasshopper on the Web: Creating Websites with Rhino.Compute, Vue, and Three.js.

This is repository with materials used during the AEC TECH Barcelona and AEC TECH NYC workshops.

Learn to build a custom web interface for real-time control and display of Grasshopper definitions. In this workshop, you will learn how to prepare your Grasshopper scripts to run on the web with Rhino.Compute. You will also explore the basics of Vue.js, a user-friendly web framework, enabling you to create a beautiful and reusable web interfaces that can control your Grasshopper definition inputs. Additionally, you will gain experience with Three.js web geometry library to develop dynamic and custom 3D scenes in your website.

Prerequisites

Installation Instructions

• Rhino 7
• Hops
• Visual Studio Code
• Node
• Git
• Github

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Run project locally

Start Rhino.Compute

Start your local Rhino.Compute server either by running your Grasshopper (with Hops installed) or by directly starting Rhino.Compute from %AppData%\McNeel\Rhinoceros\packages\7.0\Hops\0.16.2\compute.geometry\compute.geometry.

You know that Rhino.Compute is running if you can see in your console Listening on..

When you have Rhino.Compute running, have a look at the number of the localhost. The example above has a localhost number 8081. This number needs to match the host number in the source/scripts/compute.js file (line 6).

If your Rhino.Compute localhost number is different, adjust compute.js file to match it.

Run front-end

In the terminal, run following commands:

Install packages needed to run the project

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build