three.js ExtrudeGeometry Depth

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128/examples/js/utils/BufferGeometryUtils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  overflow:hidden;
  margin:0;
  padding:0;
}

JavaScript

var camera, scene, renderer, controls;
init();
animate();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0,0,250);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  controls = new THREE.OrbitControls(camera, renderer.domElement);
	// lights
  var pointLight = new THREE.PointLight(0xffffff, 1);
  pointLight.position.set(100,100,100);
  scene.add(pointLight);
  var ambientLight = new THREE.AmbientLight(0x404040);
  scene.add(ambientLight);
  
  const segmentCount = 30;

  const points = [];
  const r = 10;
  for (var i = 0; i < segmentCount; i++)
  {
    points.push(new THREE.Vector2(
      Math.cos(Math.PI * 2 * i / segmentCount) * r,
      Math.sin(Math.PI * 2 * i / segmentCount) * r
    ));
  }
  var shape = new THREE.Shape(points);
  var extrudeGeom = new THREE.ExtrudeGeometry(shape,{depth:50, bevelEnabled: false});
	extrudeGeom.deleteAttribute( 'normal' );
	var geometry = THREE.BufferGeometryUtils.mergeVertices( extrudeGeom );
  geometry.computeVertexNormals();

  // meshes
  var mesh1 = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({color:"green"}));
  
  scene.add(mesh1);
}


// animate
function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  renderer.render(scene, camera);
}