Orthographic Cubes and cylinders

by Browork

HTML

<button style="position:absolute">Start</button>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {
  OrbitControls
} from "https://threejs.org/examples/jsm/controls/OrbitControls.js"


let colorDict = [];


let selectedPreviousUnit = null;
let blinker = {};
blinker.blinkInterval;
blinker.blink = false;

colorDict["plate"] = [
  24, new THREE.Color(0xb89349)
];

colorDict["cube"] = [
  //8,new THREE.Color(0x0000ff),
  // 8,new THREE.Color(0x00ff00),
  //8,new THREE.Color(0x0000ff)
  24, new THREE.Color(0xff0000)
];

colorDict["drill"] = [
  34, new THREE.Color(0xff0000),
  66, new THREE.Color(0x00ff00)
];

var selectColorDict = [];
selectColorDict["blinkIn"] = new THREE.Color(0xff00ff);
selectColorDict["blinkOut"] = new THREE.Color(0xffffff);

var scene = new THREE.Scene();
//var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 2000);

var camera = new THREE.OrthographicCamera( innerWidth / - 2, innerWidth / 2, innerHeight / 2, innerHeight / - 2, 1, 2000 );
camera.up.set(0, 0, 1);
camera.position.set(300, -200, 500);


var renderer = new THREE.WebGLRenderer({
  antialias: true,
  depth: true
});
renderer.setSize(innerWidth, innerHeight)
renderer.setClearColor("#f0ebdd", 1);
document.body.appendChild(renderer.domElement);
document.querySelector("button").addEventListener("click", () => {
  init();
})


var bigBoxMaterial = new THREE.MeshBasicMaterial({
  vertexColors: true,
  transparent: true,
  opacity: 0.6,
  polygonOffset: true,
  polygonOffsetFactor: 0.75,
  polygonOffsetUnits: 4
});
var cylinderMaterial = new THREE.MeshBasicMaterial({
  vertexColors: true,
  polygonOffset: true,
  polygonOffsetFactor: 0.5,
  polygonOffsetUnits: 1
});
var boxMaterial = new THREE.MeshBasicMaterial({
  vertexColors: true,
  polygonOffset: true,
  polygonOffsetFactor: 0.5,
  polygonOffsetUnits: 1,
});
var edgeMaterial = new THREE.MeshBasicMaterial({
  color: 0x000000,
  polygonOffset: true,
  polygonOffsetFactor: -0.75,
  polygonOffsetUnits: -1
});

var controls;

var raycaster...