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

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.skypack.dev/three@0.139.2",
      "three/": "https://cdn.skypack.dev/three@0.139.2/"
    }
  }
</script>

body{
  overflow: hidden;
  margin: 0;
}

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(5, 8, 13).setLength(10);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

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

let grid = new THREE.GridHelper(100, 100);
grid.rotation.x = -Math.PI * 0.5;
scene.add(grid);

let objData =[
  {
    position: {x: 1, y: 2, z: 1},
    rotation: {x: 0, y: 0, z: Math.random() * Math.PI},
    scale: {x: 6, y: 2, z: 3}
  },
  {
    position: {x: -2, y: -3, z: -0.5},
    rotation: {x: 0, y: 0, z: Math.random() * Math.PI},
    scale: {x: 4, y: 2, z: 0.5}
  },
];

let g = new THREE.BufferGeometry();
g.setAttribute("position", new THREE.Float32BufferAttribute([
  1, 1, 1,
  1,-1, 1,
 -1,-1, 1,
 -1, 1, 1,
  1, 1,-1,
  1,-1,-1,
 -1,-1,-1,
 -1, 1,-1
], 3));
g.setIndex([0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7]);
g.scale(0.5, 0.5, 0.5);
let m = new THREE.LineBasicMaterial({color: "aqua"});

objData.forEach(od => {
  let box = new THREE.LineSegments(g, m);
  box.position.copy(od.position);
  box.rotation.setFromVector3(od.rotation);
  box.scale.copy(od.scale);
  scene.add(box)
})

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

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