BT

InfoQ Homepage News 3D Modeling Made Easy with JSModeler

3D Modeling Made Easy with JSModeler

Bookmarks

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
Style

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.

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

Community comments

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

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

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.