Tuesday, July 22, 2014

vA3C Viewer: Work-in-progress Update: Digging Deep DOM into 3D Models

Lucy in the Sky with Birds

One of the many joys of JavaScript is its very close-binding to the HTML Document Object Model (DOM.), This enables little people like me to blast out code that is way above their given brain-grade. With very little training, you can quite quickly and easily see what is causing this hiccough or gripe in this code snippet you are cobbling together.The JavaScript console is your friend. Type in the word 'window' or 'document' and a dot or period, click on the pop-up menu items, repeat.

It's a reverse Hansel and Gretel. The dots are like little stones you follow. But instead of taking you home they encourage you to visit new worlds you never knew existed. Yes, debuggers in other languages have similar sorts of capabilities - but since they are not as closely linked to the DOM they mostly good at showing you the garbage you have created and not as good with curated, fun stuff that's out there.

But this is not a language comparison diatribe. This post about accessing 3D models in deep DOM-like fashion.

I have been looking at Mr.doob's 200+ Three.js coding examples for four years. Their display output and their lines of code are becoming etched in my mind. They become fixed pillars as I look back on my development process.

Until yesterday.

Mr.doob's lines of code - and any other code - is as mutable, as real-timable, as DOM-able, as fresh as we want it to be.

So I am bringing in Lucy into Voxel Painter and making her mesh reflect the square in the city of Pisa. I have put Suzanne in the NURBs demo and the Witch of Agnesi cylinder equation in the canvas birds demo.

For sure, I could do this in a CAD program: insert a 'block' into a drawing etc. The difference is that I am not just using the program. I am creating/editing/playing with the program itself at the same time as I use it.

It no longer takes teams of really smart compter science wizards many weeks to add a new feature. You can now bring in all that 3D data into the DOM. You can use the JavaScript Console to guide you into inventing new tricks for that data.  And you can do this before breakfast

Viewer Live Demo
Read Me
Source Code


  1. I am very happy to discover your post as it will become on top in my collection of favorite blogs to visit. how much is a 3d printer

  2. I randomly browse blogs on the web, and i discover your article to be very informational. I even have already bookmark it on my browser, so as that I will view your blog publish all over again later. Additionally, i’m wondering whether or not or not your weblog is open for link exchange, as i really need to trade links with you. I do not normally do that, however I hope that we are going to have a mutual hyperlink exchange. Let me grasp and have an ideal day! dark web sites

  3. We've all heard of Murphy's Law, the principles of which seem most relevant to office technology. Under heavy loads and tight deadlines, it seems that printers run out of toner or experience a severe paper jam. renting impresoras sevilla