How can I graphically represent width, height and depth dimensions?

Question

I want this but so it adjusts to sizes entered in a form on a webpage in fairly normal HTML/CSS:

Way back in the 1990's you could show the proportions of a box in 3D using VRML and have the controls adjustable with nice sliders/text entry fields. It also would not take all day to work out. The box could be lit and you could see it in perfect 3D at any angle.

A decade on and I am stumped as to how best to represent a simple box with relative proportions. I want something that will work in all browsers.

How hard can a box be?

Answer 1

Unfortunately there's no way to accomplish this with just HTML and CSS. Pretty much all interactivity on a webpage other than links requires writing code in JavaScript.

Now if you are willing/able to dive into a bit of programming, the 3D aspect of things makes the problem slightly (but not enormously) more complex. If you only had to adjust the width and height (ie. 2D) then it would be almost trivial to program, but adjusting depth in the image makes things more complicated.

You will probably want to draw the box in code using an API with line drawing commands, like Processing.js

Answer 2

When comparing VRML with modern technology, remember that browsers did not have native VRML support, users needed plugins like Cosmo Player to see anything.

That said, there are two ways I can think of that you can accomplish your goal:

• You can use Three.js in canvas mode, with the fxCanvas shim for older IE versions. Here's a demo of something relevant to your desired functionality.
• You can use SVG with a svgweb shim for IE support. Here's a demo of almost exactly what you want, done with SVG.

Answer 3

I would suggest checking out Three.js. Using that with HTML5/CSS3 should be a fairly straightforward solution.

Here are a few links to get you started.

http://en.wikipedia.org/wiki/Threejs
http://www.aerotwist.com/tutorials/getting-started-with-three-js/
http://mrdoob.github.com/three.js/

Answer 4

After extensive evaluation it seems that drawing a simple box in 3D (not orthographic 3D) is beyond what the modern day web browser is capable of. This is disgusting and I am utterly appalled.

The way I did this was to not bother, to have a plain drawing and that was that. Dreams down-sized. How hard can a simple box be? Too hard for today's flat web.