This was an early experiment with a rather extravagant web page format, inspired by 90's room-based PC interfaces like Packard Bell Navigator, combined with the excessive capabilities of modern CSS transforms. All of the walls and furniture are made of HTML elements (primarily divs), rotated to fit together as a 3D model.
The fact that modern web pages can do this is still incredible, to us.
Some highlights are called out below, but the source code is also available in the neoroom repo.
This example uses JavaScript to create and position the divs. But it is entirely possible to do this on a static page (save for possibly the interactive click-to-rotate buttons).
We built an intermediate layer we call "RoomJL" on top of jQuery that moves and sizes the divs (which we call quads, internally) and applies CSS transforms. Models like the bench or desk are built on top of this.
The "TV" shape uses an slanted top to give it some "character," but this took a disproportionate effort. The sides are actually two "quads" (i.e. divs): the slants of the sides are a second set of quads above the cube walls with special CSS to make only half of them visible, creating fake "triangles."
The code below is that special CSS. Essentially, the fake "triangles" just have very large opaque borders on two sides, and a large transparent border which shears one of them in half on another side. It's awkward, but it works!
| .tv-left-t { | |
| border-top: 0; | |
| border-left: 40px solid transparent; | |
| border-right: 40px solid dimgray; | |
| border-bottom: 40px solid dimgray; | |
| outline: none; | |
| } | |
| .tv-right-t { | |
| border-top: 0; | |
| border-right: 40px solid transparent; | |
| border-left: 40px solid dimgray; | |
| border-bottom: 40px solid dimgray; | |
| outline: none; | |
| } |
The slanted part of the top of the TV is just rotated at an angle that was visibly estimated to "look right." The end result is somewhat underwhelming for the effort it required.
Also of note is the YouTube video embedded in an iframe on the TV screen. It requires a click to play and one must move the mouse cursor away so that the YouTube gadgets vanish, but it hammers home that these are just rotated divs!
While the potential for this project is limited due to a high cost/reward ratio, it does have some interesting points. Hopefully some of the things we learn here may be useful elsewhere... including this website!