: 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: Way back in the 1990's

@Berryessa866

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.
en.wikipedia.org/wiki/Threejs www.aerotwist.com/tutorials/getting-started-with-three-js/ mrdoob.github.com/three.js/

Vote Up Vote Down

@Mendez620

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.

Vote Up Vote Down

@Nimeshi706

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.

Vote Up Vote Down

@Sarah814

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

Vote Up Vote Down