Rotating 3D SVG Cube

Introduction

Since getting my head around how 3D graphics work (to a degree at least), I thought I'd apply what I know to my favourite format: SVG. Below is an SVG displaying a square, but if you click on the arrows, the shape changes, giving the appearance of a cube rotating about either the x- or y-axis.

The SVG works by storing the x-, y- and z-coordinates of a cube in three separate arrays. When the arrows are pressed, these values are transformed, and the x and y positions of the twelve lines that make up the edges of the cube are updated. The code for the transformation is almost identical to that in my Python program -- there is even a Math.atan2() function. To see the code in more detail see the Github link at the top of the page.

Another feature of this SVG which I'm pleased about is the fact that the functions are repeated called if the mouse is held down on the buttons. I've described how to do this here.

Updates

I made this SVG pretty quickly and I think it's pretty inefficient. There's quite a lot more I could do if I get some time:

Use matrix transformations. I'm not sure if javascript can multiply matrices natively (EDIT: it can't), but it should be easy enough to write a function for it. This should make the code a bit more efficient and save having separate functions for rotating about the different axes.

Make a more complex shape. I already have a Python .obj reader and it should be quite easy to make this output SVG files. Then I could view more complex shapes created in other programs.

Shade the surfaces. I have a Python program that does this reasonably well, so I could try to adapt the code for this. It would be interesting to see how fast the program can run.

Add more transformations. I could add rotation about the z-axis, zooming and translations. I could try to make an entire 3D game, but I think that would be going too far.

Comments (6)

Francisco Ortiz
on Dec. 31, 2012, 5:11 a.m.

Hey Peter! Incredible Website! Congratulations!

Thank you so much for this awesome template. I can't wait to see how this will handle .obj data, I don't care it's just wireframe, simple things are the best ones :) It would be awesome if we can just copy and paste .obj vertices and faces and see it "rendered" as .svg.

This is very old, but maybe his matrix is still usefull for you?http://www.kevlindev.com/geometry/3D/js3d/cube.svg

This is another example I like pretty much, but canvas doesn't handle zoom beautifully like .svg ;)http://www.canvasdemos.com/userdemos/toxicgonzo/3dobjviewer.html

And my "clean" version of it: http://primotico.webs.com/html5/html5.html

Yours,

Ortiz

Greg
on June 3, 2013, 2:52 p.m.

Nice cube!

georgeh
on Aug. 26, 2013, 4:30 p.m.

Thanks for this. It was quite useful in developing some some roatating 3D charts using SVG.

A couple of notes:

1)I found it more precise to always rotate from an intial set of array values rather than incrementing the array values because the values gradually lose precision and you can't back-up to the precise original position. So I keep track of the rotation angle, and move the objects from an initial position based on that angle. Yes, it requires more computations, but there is no difference to the user.

2) If you hold a button down on your cube it eventually reverses the rotation direction.

Thanks again for publishing this.

Anonymous
on July 20, 2014, 2:54 a.m.

This took me back to the bbs days and the "Denthor of Asphyxia" tutorials... which I can still find, unbelievable...