3D SVG + Three.js + React
3D polygons are extracted from a .svg file and intially placed in the Three.js environment. You may toggle the 3D SVG polygons between the React and Three.js environments. You can make changes to the 3D polygons while in the React environment: Click on a 3D polygon to change its opacity. Then return them to the Three.js environment.

SVG Source:

Babel Script (code):
  1.  
  2.     //---initialize SVGg element w/ desired svg elements and props attributes---
  3.     class SVGg extends React.Component
  4.     {
  5.         render()
  6.         {
  7.             return (
  8.             <g className="svg-g"  transform={this.props.transform}  >{this.props.children}</g>
  9.             );
  10.         }
  11.     }
  12.  
  13.     //--- add super state: props = state ---
  14.     class AddSuperState extends React.Component
  15.     {
  16.         constructor()
  17.         {
  18.             super();
  19.             this.state =
  20.             {
  21.                 id: null,
  22.                 transform: null,
  23.                 children:null
  24.             };
  25.         }
  26.  
  27.         render()
  28.         {
  29.             return (
  30.                 <SVGg id={this.state.id} className="svg-g"  transform={this.state.transform} >{this.state.children}</SVGg>
  31.             );
  32.         }
  33.     }
  34.  
  35.     //---click on 3D polygon---
  36.     function changeMyOpacity(e)
  37.     {
  38.         var target=e.target
  39.         var myG=target.parentNode
  40.         var pgons=myG.childNodes
  41.         for(var k=0;k<pgons.length;k++)
  42.         {
  43.             var pgon=pgons.item(k)
  44.             var myOpacity=pgon.getAttribute("opacity")
  45.             if(!myOpacity || myOpacity=="1")
  46.                 pgon.setAttribute("opacity",.4)
  47.             else
  48.                 pgon.setAttribute("opacity",1)
  49.         }
  50.         e.preventDefault();
  51.  
  52.         showSourceSVG()  //---local function to show svg source on page: React Root SVG Source---
  53.     }
  54.  
  55. //---button---
  56. function insertInReact()
  57. {
  58.     var threeSVG=document.getElementById("threeSVG")
  59.     var svgGs=[]
  60.     var gs=threeSVG.childNodes
  61.  
  62.     for(var k=0;k<gs.length;k++)
  63.     {
  64.         var g=gs.item(k)
  65.  
  66.         if(g.nodeName=="g")
  67.         {
  68.             var gId=g.getAttribute("id")
  69.             var transform=g.getAttribute("transform")
  70.  
  71.             var transXYSplit=transform.split("translate(")[1].split(")")[0].split(",")
  72.             var transX=transXYSplit[0]
  73.             var transY=transXYSplit[1]
  74.  
  75.             var paths=g.childNodes
  76.             var pathsArray=[]
  77.             for(var j=0;j<paths.length;j++)
  78.             {
  79.                 var path=paths.item(j)
  80.                 var myClass=path.getAttribute("class")
  81.                 var myd=path.getAttribute("d")
  82.                 var myFill=path.getAttribute("fill")
  83.                 var myStroke=path.getAttribute("stroke")
  84.                 var myStrokeWidth=path.getAttribute("stroke-width")
  85.                 var myOpacity=path.getAttribute("opacity")
  86.                 if(!myOpacity) myOpacity=1
  87.  
  88.                 pathsArray.push(<path id={"path"+(k+j)} opacity={myOpacity} onClick={changeMyOpacity} key={"path"+(k+j)} d={myd} className={myClass} fill={myFill} stroke={myStroke} strokeWidth={myStrokeWidth}></path>)
  89.             }
  90.  
  91.             svgGs.push(<SVGg className="g-svg" id={gId+k} key={gId+k}  transform={transform}  >{pathsArray}</SVGg>)
  92.  
  93.  
  94.             }
  95.         }
  96.  
  97.     //---remove existing polygons from scene---
  98.     var children = scenePolygon.children;
  99.     for(var i = children.length-1;i>=0;i--)
  100.     {
  101.         var child = children[i];
  102.         scenePolygon.remove(child);
  103.     }
  104.     //---remove current svg root element---
  105.     svgDiv.removeChild(svgDiv.firstChild)
  106.     const svgRoot=ReactDOM.render(<svg id="mySVG" viewBox="-400 -200 800 400"   width="800" height="400"  overflow="visible" xmlns="http://www.w3.org/2000/svg" />, svgDiv);
  107.  
  108.     ReactDOM.render(  //---encapsulate in <g> mySVG---
  109.      <g>{svgGs}</g>
  110.         ,mySVG
  111.     )
  112.  
  113.     showSourceSVG() //---local function for Show Source SVG---
  114.     insertInThreeJSButton.disabled=false
  115.     insertInReactButton.disabled=true
  116.  
  117. }
  118. window["insertInReact"]=insertInReact

Javascript: