Threejs - Collinear Lines

by black strings

HTML

<p>
Doesn't work well with floating point numbers.
</p>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

import * as THREE from "https://unpkg.com/[email protected]/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js";

class Main {
	constructor(){
    this.objects = []; 
    this.scene = new THREE.Scene();
    
    var width = window.innerWidth;
    var height = window.innerHeight * .75;
    this.camera = new THREE.PerspectiveCamera( 
    	35, width/height, 0.1, 10000 
    );
    
    this.renderer = new THREE.WebGLRenderer();
    
    
    this.renderer.setSize( width, height );
    this.renderer.setClearColor( 0xcccccc, 1 ); 
    
    // controls should set 2nd param or mouse move will be all over the main dom element
    // null on 2nd param, threejs will use the parent as the mouse click and prevent default
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    
    // will turn off zooming while panning with right mouse click, false by default
    this.controls.screenSpacePanning = true;
    
    document.body.appendChild( this.renderer.domElement );
    this.scene.add(this.camera);

    
    this.setToFullOrbit(this.controls);
    this.camera.position.copy(new THREE.Vector3(100,100,100));
    // fix first frame render issue going invisible
    this.camera.lookAt(new THREE.Vector3(0,0,0));

    var axisHelper = new THREE.AxisHelper();
    //his.scene.add(axisHelper);
    
    var grid = new THREE.GridHelper(144,12);
    grid.rotateX(Math.PI / 2);
    this.scene.add(grid);

		this.createScene();

  }
  
  // playground
  createScene(){
  
  var p1 = new THREE.Vector3();
  var p2 = new THREE.Vector3(0, 10);
  var p3 = new THREE.Vector3(10, 10);
  var p4 = new THREE.Vector3(10, 0);
  var arr = [p1, p2, p3, p4];
  var bb = new THREE.Box3();
  bb.setFromPoints(arr);
  const box = new THREE.Box3Helper(bb, 0xffff00 );
  this.scene.add(box);
  
  var interval = setInterval(() => {
  	arr.forEach(v => {
    	var center = new THREE.Vector3();
      box.box.getCenter(center);
   ...