title: How to draw Shape geometry with 3d points(x,y,z) using threejs which is not flat shape(surface)
body: <pre><code>        var scene = new THREE.Scene();
          var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
          camera.position.set(0, 10, 300);
          var renderer = new THREE.WebGLRenderer({
            antialias: true
          });
          renderer.setSize(window.innerWidth, window.innerHeight);
          document.body.appendChild(renderer.domElement);
  
          var controls = new THREE.TrackballControls(camera, renderer.domElement);
  
          var light = new THREE.DirectionalLight(0xffffff, 0.5);
          light.position.setScalar(100);
          scene.add(light);
          scene.add(new THREE.AmbientLight(0xffffff, 0.5));
  
  
          var closedSpline = new THREE.CatmullRomCurve3([
            new THREE.Vector3(-60, -100, -10),
            new THREE.Vector3(-60, 20, 0),
            new THREE.Vector3(-60, 120, -20),
            new THREE.Vector3(60, 120, 0),
            new THREE.Vector3(60, -100, 10)
          ]);
          closedSpline.curveType = 'catmullrom';
          closedSpline.closed = true;
  
          var closedSpline1 = new THREE.CatmullRomCurve3([
            new THREE.Vector3(-50, -90, -10),
            new THREE.Vector3(-50, 10, 0),
            new THREE.Vector3(-50, 110, -20),
            new THREE.Vector3(50, 110, 0),
            new THREE.Vector3(50, -90, 10)
          ]);
          closedSpline1.curveType = 'catmullrom';
          closedSpline1.closed = true;
  
          var tubeGeometry = new THREE.TubeBufferGeometry(closedSpline, 100, 1, 5, true);
  
          var material = new THREE.MeshLambertMaterial({
            color: 0xb00000,
            wireframe: false
          });
          var mesh = new THREE.Mesh(tubeGeometry, material);
          scene.add(mesh);
  
          var tubeGeometry1 = new THREE.TubeBufferGeometry(closedSpline1, 100, 1, 5,true);
  
          var material1 = new THREE.MeshLambertMaterial({
            color: 0xb00000,
            wireframe: false
          });
          var mesh1 = new THREE.Mesh(tubeGeometry1, material1);
          scene.add(mesh1);
  
  
          // magic starts here
          var shape = new THREE.Shape(closedSpline1.getPoints(100)); // make a shape
          shape.holes.push(new THREE.Path(closedSpline1.getPoints(100))); // add a hole
          var shapeGeometry = new THREE.ShapeGeometry(shape); // create a geometry
          var track = new THREE.Mesh(shapeGeometry, new THREE.MeshLambertMaterial({
            color: "yellow",
            side:THREE.DoubleSide,
          })); // create a track from the geometry
          scene.add(track);
  
          render();
  
          function render() {
            requestAnimationFrame(render);
            controls.update();
            renderer.render(scene, camera);
          }
  </code></pre>
  
  <p>Above is my code which draw two tube geometry using <code>THREE.CatmullRomCurve3</code> points and surface between those two tubes. Issue i am facing is surface between those two tubes(Track in above code) is always flat(2d) instead of 3d. I think <code>THREE.Shape()</code> are not using z axis values to draw surface. Can anybody guide me to right direction or some related samples. Thanks</p>