Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News 3D Modeling Made Easy with JSModeler

3D Modeling Made Easy with JSModeler

This item in japanese

Viktor Kovacs has developed JSModeler, an easy to use JavaScript API to visualize 3D models rendered using WebGL. The tool was built on top of the popular three.js framework. The library includes various demos built using the library, including a Lego builder, 3D Tic-Tac-Toe and a Robotic Arm.

The library has the following capabilities:

  • Simple 3D model building manually or with generator functions.
    • We can define our model with adding vertices and polygons manually.
    • We can use built-in generator functions to create basic shapes (cuboid, sphere, cylinder, cone, torus, polygonal torus, prism, prism shell, line shell, ruled surface, revolved surface, platonic and archimedean solids, function surface).
  • Built-in Three.js based model viewer with rotation and zoom functionality.
  • Automatic conversion to Three.js geometry format.
  • Convex and concave polygons are automatically triangulated during the conversion.
  • Vertex normals automatically calculated for the curved polygons.
  • Polygon triangulation for 2D and 3D polygons.
  • Lot of 2D and 3D geometry functions.
  • Automatic exportation to STL file format.

A tutorial guide explains the basics. There are a few basic concepts:

  1. Bodies, which are the objects that appear in your visualization. Bodies are built up from:
    1. Vertices: points in a 3D space
    2. Polygons: surfaces that connect a number of vertices
    3. Curve groups: that can combine multiple polygons into a curvy shape.
  2. Materials: define what color a polygon should have
  3. Transformations: transform bodies, for instance shifts they location, or rotates them.
  4. Built in generator functions for various shapes (cuboids, spheres, cylinders, cones, prisms, etc.)

JSModeler is available on Github and comes with a large number of examples to help users get started.

Rate this Article