block by bricof 605a89923aaf6d529c1b6156f635877d

3D Wireframe from OBJ File

Full Screen

This example a simple parsing of the obj file format for 3D objects, and the display of 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 is indicative 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.

index.html

obj_parse.js