Saturday, November 18, 2017

JavaScript fun for 3D

Yesterday I wrote about a few of the JavaScript libraries I found that would help solve some needs at Day Job (tm).  Today I'll mention another one I played with yesterday evening that may be of some interest.  I'd heard of three.js before, as it was used in the web-based planet generator I've mentioned in the past, but this was the first time I really looked at in depth.

three.js is a JavaScript library for loading, displaying, and interacting with 3D graphics inside a web browser.  WebGL was introduced as a web version of the venerable OpenGL technology years ago, but OpenGL (and, by extension, WebGL) are very low level.  three.js provides a higher-level interface, with support for loading models in various formats.  The website offers a multitude of example web pages with working examples.  It even has a few examples using fractal methods to generate a terrain that can be moved around in.

Alas, there aren't built-in loaders for the formats I need for Day Job (tm), but that's simply a matter of writing a compatible loader, or a separate converter program to take models in the formats we have them in and convert them to formats three.js can load.

Beyond work, though, it has the potential to be useful as the display end for some of the other things I've been experimenting with for fun.  I wouldn't want to write the code to generate things in JavaScript, but a web page using three.js to display the results would be entirely feasible. 

Surprisingly, three.js even offers a web-based 3D scene editor.  It isn't Blender, SketchUp, 3D Max, or AutoCAD, and there's no real mesh modeling support, only primitives like box, sphere, cylinder, torus, etc.  Nevertheless, it can be used to create a 3D scene relatively easily, and does have import capabilities so that models in other formats, like OBJ, can be imported.  It can export to OBJ, STL, and its own JSON-based format.  It can even publish scenes and a web page to view the scene.  Pretty slick.

Anyhow, if you need 3D on your web page, this is worth checking out.

No comments:

Post a Comment