a Cessna airplane, using 3745 nodes and 3897 faces with orders from 3 up to 32.
the cessna.obj file was sourced from this collection
a fork of the bl.ock 3D Wireframe from OBJ File from @brianedcoffey
README.mdThis is a simple example of parsing the obj file format for 3D objects, and the displaying 3D objects in svg, using orthographic projection from 3D to 2D, and using d3’s Zoom Behavior for zoom (mouse scroll or swipe), rotation (mouse drag) and pan (spacebar plus mouse drag). Line opacity indicates of visual depth (lines closer to the viewer are more opaque than lines further away).
The obj file format is a commonly used file format for 3D model exchange, and the teapot is a common example - in this case, the obj file was sourced from this collection.
WebGL (e.g. via threejs) is becoming the most common approach for browser-based visualization of 3D models, but there are situations where svg display is still desirable. The use of line opacity for depth is a nice simple trick that works well in some cases but not all - more cases would benefit from a dynamic z-ordering of surfaces (by redrawing surfaces only when necessary), which would then allow for opaque surface rendering instead of just wireframes. I plan to demonstrate this in an upcoming example.