<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.150.0/build/three.module.js",
            "addons/": "https://cdn.jsdelivr.net/npm/three@0.150.0/examples/jsm/"
        }
    }
</script>
<div class="container" id="container"></div>

<div class='parent'>
  <p id='parentName'></p>
</div>

html, body{
    width: 100vw;
  height: 100vh;
    padding: 0;
    margin: 0;
    background-color: black;
    margin: 0;
    padding: 0;
}


.container{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
    z-index: 2;
}
p{
  padding:0;
  margin:0;
}
.parent{
  position:fixed;
  top:0;
  left:0;
  background-color: #ffffff;
/*   width:200px; */
  height:40px;
  z-index: 3;
  font-size:30px;
    padding:0;
  margin:0;
      display: flex;
    align-content: center;
    align-items: center;
}

import * as THREE from 'three';
import { OrbitControls } from 'addons/controls/OrbitControls.js'


let container = document.querySelector('#container');
let widdi = container.offsetWidth;
let hiddi = container.offsetHeight;

const parentName = document.querySelector('#parentName');

let scene, camera, orbit;
const renderer = new THREE.WebGLRenderer( { antialias: true, gammaOutput: true, alpha: true } );
const mouse = new THREE.Vector2();

init()

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

  camera = new THREE.PerspectiveCamera(50, widdi / hiddi, 0.1, 15000)
  camera.aspect = widdi / hiddi;
  camera.position.set(0,2,2)
  
  let ambLight = new THREE.AmbientLight(0xffffff, 0.4)
  scene.add(ambLight)
  
  let dirLight = new THREE.DirectionalLight(0xffffff, 0.5)
  scene.add(dirLight)
  dirLight.position.set(20,30,40)
  
    let dirLight1 = new THREE.DirectionalLight(0xffffff, 0.5)
  scene.add(dirLight1)
  dirLight1.position.set(-20,30,-40)
  
    renderer.setSize(widdi, hiddi)
  renderer.setClearColor( 0x333333, 1 );
  container.appendChild(renderer.domElement)
  
  orbit = new OrbitControls(camera, renderer.domElement)
  
  let ah = new THREE.AxesHelper()
  scene.add(ah)
  

const vertices = [
    new THREE.Vector3(0.5, -0.5, 0.5), //0
    new THREE.Vector3(0.5, -0.5, -0.5), //1
    new THREE.Vector3(-0.5, -0.5, -0.5), //2
  
    new THREE.Vector3(-0.5, -0.5, -0.5), //2
    new THREE.Vector3(0.5, -0.5, 0.5), //0
    new THREE.Vector3(-0.5, -0.5, 0.5), //4
  
    new THREE.Vector3(-0.5, -0.5, 0.5), //4
    new THREE.Vector3(-0.5, 0.5, -0.5), //5
    new THREE.Vector3(-0.5, -0.5, -0.5),//2
  
    new THREE.Vector3(-0.5, -0.5, -0.5), //2
    new THREE.Vector3(0.5, -0.5, -0.5), //1
    new THREE.Vector3(-0.5, 0.5, -0.5), //5
  
    new THREE.Vector3(-0.5, 0.5, -0.5), //5
    new THREE.Vector3(-0.5, -0.5, 0.5), //4
    new THREE.Vector3(0.5, -0.5, 0.5), //0
  
    new THREE.Vector3(0.5, -0.5, 0.5), //0
    new THREE.Vector3(0.5, -0.5, -0.5), //1
    new THREE.Vector3(-0.5, 0.5, -0.5), //5
];
  
const vertices2 = [
    new THREE.Vector3(0.5, -0.5, 0.5), //0
    new THREE.Vector3(0.5, -0.5, -0.5), //1
    new THREE.Vector3(-0.5, -0.5, -0.5), //2
  
    // new THREE.Vector3(-0.5, -0.5, -0.5), //2
    // new THREE.Vector3(0.5, -0.5, 0.5), //0
    new THREE.Vector3(-0.5, -0.5, 0.5), //3
  
    // new THREE.Vector3(-0.5, -0.5, 0.5), //3
    new THREE.Vector3(-0.5, 0.5, -0.5), //4
    // new THREE.Vector3(-0.5, -0.5, -0.5),//2
  
//     new THREE.Vector3(-0.5, -0.5, -0.5), //2
//     new THREE.Vector3(0.5, -0.5, -0.5), //1
//     new THREE.Vector3(-0.5, 0.5, -0.5), //4
  
//     new THREE.Vector3(-0.5, 0.5, -0.5), //4
//     new THREE.Vector3(-0.5, -0.5, 0.5), //3
//     new THREE.Vector3(0.5, -0.5, 0.5), //0
  
//     new THREE.Vector3(0.5, -0.5, 0.5), //0
//     new THREE.Vector3(0.5, -0.5, -0.5), //1
//     new THREE.Vector3(-0.5, 0.5, -0.5), //4
];

// Define the indices that connect the vertices to form triangles
const indices = new Uint16Array([
  0, 1, 2,
  2, 0, 3,
  3, 4, 2,
  2, 1, 4,
  4, 3, 0,
  0, 1, 4
]);

// Create a BufferGeometry and set its attributes
const geometry = new THREE.BufferGeometry();
  geometry.setFromPoints(vertices)
// geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
// geometry.setIndex(new THREE.BufferAttribute(indices, 1));

// Compute vertex normals for shading
geometry.computeVertexNormals();

// Create a MeshPhongMaterial
const material = new THREE.MeshStandardMaterial({color: 0x00ff00, side:THREE.DoubleSide});

// Create a new Mesh with the BufferGeometry and Material
const mesh = new THREE.Mesh(geometry, material);

// Add the Mesh to the scene
scene.add(mesh);
  
  let ps = []
  let cn = new THREE.ConeGeometry(1,1, 4)
  for (var i = 0; i < cn.index.array.length; i += 3){
    ps.push([cn.index.array[i], 
           cn.index.array[i + 1],
           cn.index.array[i + 2]])
  }
  console.log(ps)
const cnm = new THREE.MeshStandardMaterial({color: 0x00ff00});
  const cns = new THREE.Mesh(cn, cnm);
// scene.add(cns);

  
  animate()
  
}

window.addEventListener('resize', onWindowResize, false)

function onWindowResize() {

    widdi = container.offsetWidth;
    hiddi = container.offsetHeight;

    camera.aspect = widdi / hiddi;
    camera.updateProjectionMatrix()

    renderer.setSize(widdi, hiddi)
    render()
}



function animate() {
    window.requestAnimationFrame(animate)
    render()
}

function render() {

    renderer.render(scene, camera)
}