<!DOCTYPE html>
<html lang="en">

     <head>
          <title>three.js webgl - svg loader</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
          <style>
          body
          {
               color: #ffffff;
               font-family: Monospace;
               font-size: 13px;
               text-align: center;
               font-weight: bold;
               background-color: #000000;
               margin: 0px;
               overflow: hidden;
          }

          #info
          {
               position: absolute;
               top: 0px;
               width: 100%;
               padding: 5px;
          }
          </style>
     </head>

     <body>

          <div id="container"></div>

          <!-- connect the library three.js -->
          <script src="https://dir.by/example_lib/tree_js/three.js"></script>

          <!-- library for downloading pictures svg -->
          <script src="https://dir.by/example_lib/tree_js/SVGLoader.js"></script>

          <!-- mouse control library and so on -->
          <script src="https://dir.by/example_lib/tree_js/OrbitControls.js"></script>

          <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - SVGLoader</div>

          <script>

               var renderer, scene, camera;

               init();
               animate();

               function init()
               {
                    var container = document.getElementById( 'container' );

                    scene = new THREE.Scene();
                    scene.background = new THREE.Color( 0xb0b0b0 );

                    camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
                    camera.position.set( 0, 0, 200 );

                    var helper = new THREE.GridHelper( 160, 10 );
                    helper.rotation.x = Math.PI / 2;
                    scene.add( helper );

                    var loader = new THREE.SVGLoader();
                    loader.load( 'https://dir.by/developer/three_js/example_my_rotate_svg_image/tiger.svg', function ( paths )
                    {
                         var group = new THREE.Group();
                         group.scale.multiplyScalar( 0.25 );
                         group.position.x = - 70;
                         group.position.y = 70;
                         group.scale.y *= -1;

                         for ( var i = 0; i < paths.length; i ++ )
                         {
                              var path = paths[ i ];

                              var material = new THREE.MeshBasicMaterial(
                              {
                                   color: path.color,
                                   side: THREE.DoubleSide,
                                   depthWrite: false
                              } );

                              var shapes = path.toShapes( true );

                              for (var j=0; j < shapes.length; j ++)
                              {
                                   var shape = shapes[ j ];

                                   var geometry = new THREE.ShapeBufferGeometry( shape );
                                   var mesh = new THREE.Mesh( geometry, material );

                                   group.add( mesh );
                              }
                         }

                         scene.add( group );
                    } );

                    renderer = new THREE.WebGLRenderer( { antialias: true } );
                    renderer.setPixelRatio( window.devicePixelRatio );
                    renderer.setSize( window.innerWidth, window.innerHeight );
                    container.appendChild( renderer.domElement );

                    var controls = new THREE.OrbitControls( camera, renderer.domElement );
                    controls.screenSpacePanning = true;

                    window.addEventListener( 'resize', onWindowResize, false );

                    document.body.addEventListener( 'dblclick', function ( event )
                    {
                         var group = scene.children[ 1 ];
                         group.traverse( function ( child )
                         {
                              if ( child.material )
                                   child.material.wireframe = !child.material.wireframe;
                         } );

                    } );
               }

               function onWindowResize()
               {
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();

                    renderer.setSize( window.innerWidth, window.innerHeight );
               }

               function animate()
               {
                    requestAnimationFrame( animate );

                    render();
               }

               function render()
               {
                    renderer.render( scene, camera );
               }
          </script>
     </body>

</html>