body {
      margin: 0;
    }

    canvas {
      width: 100%;
      height: 100%
    }

import * as THREE from "//cdn.skypack.dev/three@0.129?min";
import { OrbitControls } from "//cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls?min";

var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
window.camera = camera;
camera.position.set(
  -0.49732164894770564,
  1.4859274087948953,
  1.069941157211484
);

var scene = new THREE.Scene();
window.scene = scene;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let positions = new Array(3 * 6).fill(0);
let colors = positions.map((n) => 1);
let geometry = new THREE.BufferGeometry();
window.geometry=geometry
geometry.setIndex([0, 1, 0, 2, 0, 3, 1, 4, 1, 5]);
geometry.setAttribute(
  "position",
  new THREE.Float32BufferAttribute(positions, 3)
);
geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
setSize(1);

let material = new THREE.LineBasicMaterial({
  vertexColors: true,
  depthTest: false,
  transparent: true
});
let lineSegments = new THREE.LineSegments(geometry, material);
scene.add(lineSegments);

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

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

function setSize(size) {
  const halfSize = size / 2;
  const position = geometry.attributes.position;
  window.position = position;
  position.setXYZ(0, -halfSize, 0, 0); // left
  position.setXYZ(1, halfSize, 0, 0); // right
  const arrowSize = 0.1;
  position.setXYZ(2, -halfSize + arrowSize, 0, -arrowSize); // left arrow up
  position.setXYZ(3, -halfSize + arrowSize, 0, arrowSize); // left arrow down
  position.setXYZ(4, halfSize - arrowSize, 0, -arrowSize); // right arrow up
  position.setXYZ(5, halfSize - arrowSize, 0, arrowSize); // right arrow down
  position.needsUpdate = true;
}

var animate = function () {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
};

animate();