Draw Circles
This places circles in the SVG drawing and sends them to WebGL. Set the radius and color then click a point on the SVG drawing to place the circle. Each circle can be drag/dropped. Select 'Start Over' to remove all circles.

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 SVG circles remains fixed. You can select 'SVG 3D' button to place the SVG circles into the CSS3DRenderer where they will take on the perspective of the 3D environment.
Fill Color: Radius:   

SVG Source:

ThreeJS SVG Source:

Javascript SVG:

Javascript ThreeJS: