html, body {
  height: 100%;
  margin: 0;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}

import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js";
import { TrackballControls } from "https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/TrackballControls.js";
import earcut from "https://cdn.skypack.dev/earcut@2.2.2";

const positions = [3.654951645795196, 2.264929657839237, 5.523714521220229, 3.5563312927547948, 2.3765070009266474, 5.541184188485313, 3.5746176350673564, 2.4468340524760794, 5.498646368217267, 3.6222848480169003, 2.4639963751867926, 5.459649653859993, 3.591421758204217, 2.5168133714469794, 5.455945400020331, 3.625431073401117, 2.5722828580799, 5.407366311805214, 3.594090143459868, 2.6717546006863637, 5.379985445556137, 3.5461618824183607, 2.71060410447056, 5.392342838925435, 3.5513659886622384, 2.775692533331141, 5.355682083076145, 3.471827953551555, 2.9203476814381344, 5.330851721859926, 3.5500144260437914, 2.9446279212483484, 5.265601958018247, 3.608852188741485, 3.0002018213263706, 5.19374382417209, 3.664186247478781, 2.9429854124859656, 5.187733224220592, 3.7103224960733425, 2.9255192531986056, 5.164769508341718, 3.74327945499027, 2.9481613499642085, 5.127982407967577, 3.965326285232079, 2.77266906943212, 5.058507060691127, 4.007232121370536, 2.8080614017195114, 5.005684957089214, 3.9445873327177075, 2.9220383739410662, 4.990182613470058, 3.9794786485905567, 2.9269312659608127, 4.959518429217993, 4.1547316662528555, 2.7900233550546485, 4.894279769249545, 4.167070714558477, 2.7400053750786664, 4.912015085930531, 4.122781181097273, 2.733667672017012, 4.952750386579084, 4.152760980710995, 2.6409334690902315, 4.977956071413577, 4.0615790014433415, 2.697297206504464, 5.022764556976339, 4.110208428530525, 2.542892859015846, 5.063583966085962, 4.085127340512228, 2.520594588739038, 5.0949325344914005, 4.134754675822535, 2.4597982843362494, 5.08460383620397, 4.281552524880477, 2.432585460844652, 4.975021201198726, 4.32353721657262, 2.321521233521701, 4.991749703182179, 4.224732208674441, 2.328616494758241, 5.072394206420536, 4.177723178168502, 2.4144075117027897, 5.071219322216978, 4.100199171906825, 2.242086760649272, 5.211661319427409, 4.116082820649974, 2.1447553419097405, 5.24002736031977, 4.27125165352978, 1.9795978403755226, 5.1805020705139855, 4.2989599250358745, 1.8374085669424374, 5.209882275163432, 4.330614441504678, 1.8124706243948703, 5.192372174135516, 4.30458041319084, 1.7466494704967606, 5.2363921829430575, 4.231979084510369, 1.776911035159901, 5.285162268217858, 4.2015147751651405, 1.7419096984311326, 5.320998421027822, 4.076512118923887, 1.808398955787867, 5.395529831348543, 3.9884803677427465, 1.7364818121482688, 5.484218747662146, 3.9031378071482266, 1.8473212633526133, 5.509348365131347, 3.9031378071482266, 1.8473212633526133, 5.509348365131347, 3.8398947807632937, 2.036677904350824, 5.48699837676265, 3.767350906795187, 2.224023621158645, 5.464502363216423, 3.6933791843237875, 2.2128545017120764, 5.519259475242702, 3.654951645795196, 2.264929657839237, 5.523714521220229];

let camera, scene, renderer, controls;

let mouseX = 0,
  mouseY = 0;

let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;

init();

function init() {
  scene = new THREE.Scene();

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

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 0, 20);
  scene.add(camera);

  controls = new TrackballControls(camera, renderer.domElement);
  
  const indices = earcut(positions, null, 3);
  const positionAttribute = new THREE.Float32BufferAttribute(positions, 3);
  const fillGeometry = new THREE.BufferGeometry();
  fillGeometry.setAttribute('position', positionAttribute);
  fillGeometry.setIndex(indices);
  
  const fillMaterial = new THREE.MeshBasicMaterial( { color: 0xccffff } );
  const fillMesh = new THREE.Mesh(fillGeometry, fillMaterial);
  scene.add(fillMesh);

  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', positionAttribute);
  geometry.computeVertexNormals();

  const meshMaterial = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    // opacity: 0.5,
    // transparent: true
  });

  const mesh = new THREE.Line(geometry, meshMaterial);
  scene.add(mesh);
  
  requestAnimationFrame(render);
}

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

function resize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', resize);