Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><img src="https://i.stack.imgur.com/3TGDB.png" alt="enter image description here"></p> <p>Read this <a href="http://www.songho.ca/opengl/gl_matrix.html" rel="nofollow noreferrer">http://www.songho.ca/opengl/gl_matrix.html</a> It explains pretty much everything and there is implementation.</p> <p>Beside that the CSS 3D solution will have lower performance(order of magnitude) mainly because each pice of represented surface is DOM element, it's also highly limited - you can find numerous materials about this issue(Google IO records for example) </p> <p>If you need declarative 3D framework you might want to look at <a href="http://www.x3dom.org/" rel="nofollow noreferrer">x3dom</a></p> <p>To draw a 3D box you just need to include x3dom js script and embed this declaration in your page: </p> <pre><code> &lt;body&gt; &lt;h1&gt;Hello X3DOM World&lt;/h1&gt; &lt;x3d width="400" height="300"&gt; &lt;scene&gt; &lt;shape&gt; &lt;box&gt;&lt;/box&gt; &lt;/shape&gt; &lt;/scene&gt; &lt;/x3d&gt; &lt;/body&gt; </code></pre> <p>It will parse &lt;x3d&gt; tags on your page and generate proper WebGL or Flash implementation with the good performance.</p> <p>x3d has way to import assets from Blender, Maya and 3ds Max. Here is some good reading: <a href="http://www.x3dom.org/x3dom/doc/slides/x3domIntroTutorial.pdf" rel="nofollow noreferrer">x3domIntroTutorial.pdf</a></p> <p><em>IE 11 will support <a href="http://caniuse.com/webgl" rel="nofollow noreferrer">WebGL</a> and IE10 will autoupdate to IE 11 so only non-supporting desktop browser(disabled by default) will be Safari. Apple will be forced to enable it by default. With full desktop support it won't take too long to get full mobile because it's highly competitive market. And we have highly accessible WebGL framework like three.js. So there is no sense in doing it with CSS 3D</em></p> <p><strong>UPDATE: iOS 8 Safari will enable WebGL support by default: <a href="http://caniuse.com/webgl" rel="nofollow noreferrer">http://caniuse.com/webgl</a></strong></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload