body{
  overflow: hidden;
  margin: 0;
}

import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
import * as BufferGeometryUtils from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/utils/BufferGeometryUtils";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
})

let controls = new OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let gPartTop = makePart([
  [0, 1, 1], // pinnacle
  [0, -1, 0],
  [2, 0, 0],
  [0, 4, 0],
  [-2, 0, 0]
]);

let gPartBottom = makePart([
  [0, -1.125, 0.5], // pinnacle
  [0, -3, 0],
  [2, 0, 0],
  [0, -1, 0],
  [-2, 0, 0]
]);
gPartBottom.translate(0, -0.5, 0);

let gFront = BufferGeometryUtils.mergeBufferGeometries([gPartTop, gPartBottom]);
let gBack = gFront.clone();
gBack.rotateY(Math.PI);
let g = BufferGeometryUtils.mergeBufferGeometries([gFront, gBack]);
g = g.toNonIndexed();
g.computeVertexNormals();

let m = new THREE.MeshLambertMaterial({color: 0xffaaff});

let eth = new THREE.Mesh(g, m);
scene.add(eth);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
})

function makePart(pts){
  let g = new THREE.BufferGeometry().setFromPoints(pts.map(p => {return new THREE.Vector3(p[0], p[1], p[2])}));
  let index = [
    0, 1, 2,
    0, 2, 3,
    0, 3, 4,
    0, 4, 1
  ];
  g.setIndex(index);
  g.computeVertexNormals();
  return g;
}