3D Modeling Made Easy with JSModeler

| by Zef Hemel Follow 0 Followers on Sep 06, 2013. Estimated reading time: 1 minute |

A note to our readers: As per your request we have developed a set of features that allow you to reduce the noise, while not losing sight of anything that is important. Get email and web notifications by choosing the topics you are interested in.

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

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you