Threejs - Vector3 Cross Product

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<div id="con">

</div>
<!--

Doing a dot product around two vector works around a 3D axis XYZ and not just XY.
Use dot when you want to know if two vectors are perpendicular or parallel of each other.
When dot, you'll only get back a number. The number tells you how close they are of each other in terms of direction.

0 = perpendicular
1 = same direction
-1 = opposite 180 of each other


cross two vectors when you want to find the 3rd vector who is perpendicular to the two vectors.
a cross of X on Y will give you a vector on Z axis perpendicular to X and Y.

-->

CSS

body {
  margin:0;
}

JavaScript

class Line {
	constructor(p1, p2, color) {
  	this.color = color ? color : 0xff0000;
  	this.p1 = p1;
    this.p2 = p2;
    this.mesh2D = null;
    this.create2D();
  }
  create2D(){
  	// create the line
    var geo = new THREE.BufferGeometry();
    var vertices = new Float32Array([
      this.p1.x, this.p1.y,  this.p1.z,
      this.p2.x, this.p2.y,  this.p2.z,
    ]);

    // itemSize = 3 because there are 3 values (components) per vertex
    geo.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
    this.mesh2D = new THREE.Line(geo, new THREE.LineBasicMaterial({color: this.color}));
  }
}

var objects = []; 
var scene = new THREE.Scene();

var width = window.innerWidth;
var height = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = true;
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(5)) );
// fix first frame render issue going invisible
camera.lookAt(new THREE.Vector3(0,0,0));

var axisHelper = new THREE.AxesHelper();
//scene.add(axisHelper);

var overallGridSizeInFeet = 3;
var grid = new THREE.GridHelper(fti(1 * overallGridSizeInFeet), 12 * overallGridSizeInFeet);
grid.rotateX(Math.PI / 2);
scene.add(grid);

// ---- playground here
var v1 = new THREE.Vector3(2, 2, 0);
var v = new DrawVector(v1, 0x0000ff);
scene.add(v.mesh2D);

var vectorNormal = getVectorNormal(v1);
scene.add(vectorNormal.mesh2D);

var p1 = new THREE.Vector3(1, 1);
var p2 = new THREE.Vector3(5, 1);
var line = new Line(p1, p2);
scene.add(line.mesh2D);

var p3 = new THREE.Vector3(2, 0);
var p4 = new THREE.Vector3(8, 0);
var line2 = new Line(p3, p4);
scene.add(line2.mesh2D);

var dist =...