Draw 3D SVG Polygons
This example places a 3D regular polygon into ThreeJS. Select the type of polygon and the desired 3D 'extrusion'. Adjust size, rotation, color, shading, light source, and viewer position. You can drag/drop the polygon.

The SVG drawing overlays the ThreeJS canvas. You can toggle the SVG overlay visibility by selecting the 'Close SVG/Open SVG' button. When the SVG is closed the ThreeJS canvas is available for mousewheel/cursor control via the OrbitControls feature. The default view is CSS2DRenderer (SVG 2D) where the 3D polygon remains fixed. You can select 'SVG 3D' button to place the 3D polygon into the CSS3DRenderer where it will take on the perspective of the 3D environment.
Set Size Polygon Width/Height:
Set Face Color
Stroke Width :
Extrude: Select Polygon:
Zoom
Rotate Scene
Viewer Position
Lighting

SVG Source:

ThreeJS SVG Source:

Javascript SVG:

Javascript ThreeJS: