# 3D graphics on svg element

The 3D representation in a svg element can be possible if it makes a projection of points on a plane normal to the direction of view, let name it P. The direction of view is defined by two angles: "azimuth" and "elevation".

In the figure aside you can see the P plane represented in a fix reference system, [Oxyz]. The plane has a local axis system [OG uvw] (w not represented in the figure), coresponding to the graphic coordinate system of canvas html element. The initial position of the plane P is parallel to [yz] plane of the fixed system, then rotated around a vertical axis with "az" angle, and finally rotated around the local axis "u" with angle "el". The point G of this plane, located by local coordinates uG, vG is superposed to the fix point Q defined in the fixed axis system by coordinates xQ yQ zQ.

This geometrical position's definition of the projection plane P ca be expressed by a matrix transformation between these two coordinate systems. For that, we must express the origin OG and the unit vectors u and v by components, to respect [Oxyz] system:

 OG = xQ+uG·sin(az)-vG·sin(el)·cos(az) yQ-uG·cos(az)-vG·sin(el)·sin(az) zQ+vG·cos(el)

 u = -sin(az) +cos(az) 0

 v = +sin(el)·cos(az) +sin(el)·sin(az) -cos(el)

The transformation matrix is:

 T = ux vx wx OGx uy vy wy OGy uz vz wz OGz 0 0 0 1

And it's inverse:

 T-1 = ux uy uz - vx vy vz - wx wy wz - 0 0 0 1

Where the notation <v1,v2> represents the scalar product between vectors v1 and v2

A point p(x,y,z) in the virtual 3d space has in the local system [OG uvw] the coordinates a, b and c computed with formula:

 a = T-1· x b y c z 1 1

The projection p' of the point on the plane P has coordinates a and b extracted from above matrix formula:

 a = b =

A function to compute the projection of points can be write like:

```function trans32(Q,G,az,el,p){
var sa, ca, se, ce, OG, u, v, S1, S2;
sa = Math.sin(az);
ca = Math.cos(az);
se = Math.sin(el);
ce = Math.cos(el);
OG = [
Q+G*sa-G*se*ca,
Q-G*ca-G*se*sa,
Q+G*ce
];
u = [-sa,ca,0], v = [se*ca,se*sa,-ce];
S1 = -u*OG-u*OG-u*OG;
S2 = -v*OG-v*OG-v*OG;
return [
S1+u*p+u*p+u*p,
S2+v*p+v*p+v*p
];
};
```

## Here is an application to show how it works.

The application you see below uses the equations for projection presented above. I have used a svg-element and a lot of javascript functions. All is made as an "object" entity having members and methods.

You can use the mouse to drag G point on the projection plane (four arrows sign), or to continuous change the "azimuth" and "elevation" values (on the black square). Also you can change the 3d coordinates of the Q point using the sliders.

move mouse over image, left-button pressed 