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


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

enter image description here

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?

6/3/2011 12:06:00 PM

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.
6/13/2011 5:52:00 PM