Draw Path
This builds a smooth-curve path in the SVG drawing, showing it in WebGL. Click points on the SVG drawing to set the path points. Select "Pause" to drag/drop the small circles at each point. Select 'Restart' to continue to add points. After three(3) points have been placed, you may select the 'Close Path' checkbox to connect the last point to the first point. Select "Cancel" to start over. Select 'Finish' to complete the path. The path can be drag/dropped after it is finished.

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

SVG Source:

ThreeJS SVG Source:

Javascript SVG:

Javascript ThreeJS: