Triceratops is a Grasshopper plugin that exports geometry from Grasshopper to a JSON file in the Three.js object scene format.
Triceratops is a Grasshopper exporter made for web developers that use Three.js. Therefore, the intention is to create a Grasshopper plugin that exposes the Three.js object classes and their attributes while using terminology the mirrors that of Three.js. Many components represent specific Three.js object classes in both name and attributes. For instance, the component MeshStandardMaterial allows the user to create an object of this class and associate it a mesh object.
-
Go to Triceratops page at Food4Rhino and download the project .zip folder.
-
Extract the files from the .zip folder.
-
Place the .gha file in your grasshopper components folder. This can be found from Grasshopper at: File > Special Folders > Components Folder
or often at the following location on your C drive: C:\Users[your username]\AppData\Roaming\Grasshopper\Libraries
-
Restart, or start a new instance of Rhino/Grasshopper
The plugin produces as a JSON with using the Three.js object scene format. The resulting JSON objects can be loaded into a Three.js canvas using THREE.ObjectLoader().
Currently, meshes and lines are supported. The exporter uses the bufferGeometry format for defining geometry. All meshes use face indexing.
Geometry
Mesh builds a Three.js BufferGeometry object type from mesh geometry. If no material is defined Three.js will automatically assign MeshBasicMaterial with randomly assigned colors.
MeshVertexColors builds a Three.js mesh object with vertex colors.
MeshColorFaces unwelds all mesh edges and colors vertices based on mesh faces.
Line builds a Three.js BufferGeometry object type from line geometry. If no material is defined Three.js will automatically assign LineBasicMaterial with randomly assigned colors.
Materials
MeshNormalMaterial creates a Three.js material object of the MeshNormalMaterial type. This material colors mesh faces based on their normal.
MeshBasicMaterial creates a Three.js material object of the MeshBasicMaterial type. This material gives a mesh a solid color that does not react to scene lighting or shadows.
MeshPhongMaterial creates a Three.js material object of the MeshPhongMaterial type. This material can simulate shiny materials and react to scene lighting and shadows.
MeshStandardMaterial creates a Three.js material object of the MeshStandardMaterial class. This material uses physically based rendering to make a material that reacts to light in a realistic way.
LineBasicMaterial creates a Three.js material object of the LineBasicMaterial class. This material can define a solid color for the line.
LineDashedMaterial creates a Three.js material object of the LineDashedMaterial class. This material can define a dot-dash pattern for the line.
Scene
Scene creates a Scene object from one or more mesh geometries.
ExportJSON creates a JSON string from a scene and saves it to a desired location.
RelativePath generates the file path to the location where the grasshopper is saved.
The example scene demonstrates how to export meshes with various materials and settings.
The plugin was developed in Visual Studio using the Grasshopper plugin template. The Visual Studio project folder is included in this repository.
- optional face indexing for meshes
- vertex based line colors
- MeshPhongMaterial component
- MeshLambertMaterial component
- point light component
- directional light component
- area light component
- userData component to be fed into the mesh component (i.e for coloring meshes on the fly in the browser)
- camera component
- scene attributes (background color, fog)
- animate objects using GH slider to control the frames