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?

  • @DA01: Would this be a candidate for migration to UX? – Philip Regan Jun 3 '11 at 13:20
  • 7
    sounds like Theodore is asking us how to build such a thing. This belongs on stack overflow (where my answer would be to consider looking at some of the newer Canvas JS libraries that can do some 3D stuff.) – DA01 Jun 3 '11 at 22:02
  • I just tried to migrate this to SO, but I think the bounty is preventing me from doing so. – Philip Regan Jun 13 '11 at 17:47

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

  • I think that processing.js is exactly what I need - the box primitive should do the job just fine. – Theodore Jun 13 '11 at 19:09

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.

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.



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.

  • It would be more informative to comment on the answers given and where they failed to cover your requirement. At a glance, imsky's answer seems to cover it. – e100 Jun 28 '11 at 17:54
  • I put a lot of time into trying to draw a simple box in 3D on a webpage - 2D picture of 3D was all I needed, no interaction, convoluted lighting model or anything involved. Yet, much to my irritation it seems that none of the '3d on the web' toolkits actually work, they might do if you have the right browser/operating system but they don't work on mine! What I don't understand is that you would not be able to have a computer/console game in 2D, it has to be 3D, yet, with the internets it seems we collectively do not care about 3D - if we did it would have worked properly ages ago. I despair! – Theodore Jun 29 '11 at 16:07
  • 1
    rolls eyes Okay first off you certainly can develop 2D videogames, I'm not sure where you got the impression that you can't. Second, while I do wish web 3D was further along than it is, it certainly does work and I've been working with web 3D technologies for years stackoverflow.com/questions/6376705/… – jhocking Jul 1 '11 at 20:49
  • Eyes definitely roll - I am not having any of that Flash nonsense on a web-page of my own devising. I am not having any WebGL effort that won't work on the customers screens. Week 1 of any Comp Sci 3D Graphics module and you have a box on screen with a few lines of code. We have had this internet thing since Al Gore invented it and I seem to be the only person wanting to draw a basic 3D in 2D box. This would be easier on the ZX81. – Theodore Jul 1 '11 at 21:11
  • Look at Apple's HTML5 examples. – Kheldar Aug 31 '11 at 13:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.