title: Three.js: draw a octahedron
body: <p>I want to draw a Octahedron,but the shape of the result is below expectation.I dont know the reason and next step I want to draw a Dodecahedron, any suggestions?<a href="https://i.stack.imgur.com/EKE2X.png" rel="nofollow noreferrer">The result of the Octahedron</a></p>
  
  <p>My code:</p>
  
  <pre><code>var mesh, renderer, scene, camera, controls;
  
  init();
  animate();
  
  function init() {
  
  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // scene
  scene = new THREE.Scene();
  
  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / 
  window.innerHeight, 1, 10000);
  camera.position.set(20, 20, 20);
  
  // controls
  controls = new THREE.OrbitControls(camera);
  
  // ambient
  scene.add(new THREE.AmbientLight(0x222222));
  
  // light
  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  scene.add(light);
  
  // axes
  scene.add(new THREE.AxisHelper(20));
  
  // geometry
  //var geometry = new THREE.SphereGeometry(5, 12, 8);
  var vertices = [
                  0.5,0,0, 0,0.3,0, -0.5,0,0, 0,-0.3,0, 0,0,0.3, 0,0,-0.3
              ];
              var faces = [
                  0,1,4, 1,2,4, 2,3,4, 3,0,4, 0,1,5, 1,2,5, 2,3,5, 3,0,5
              ];
  var geometry = new THREE.PolyhedronGeometry(vertices, faces, 5, 1);
  // material
  var material = new THREE.MeshPhongMaterial({
      color: 0x00ffff,
      shading: THREE.FlatShading,
      wireframe:true,
      transparent: true,
      opacity: 0.7,
  });
  
  // mesh
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  
  }
  
  function animate() {
  
  requestAnimationFrame(animate);
  
  //controls.update();
  
  renderer.render(scene, camera);
  
  }
  </code></pre>