Threejs - math planes

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>

CSS

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

JavaScript

var scene, renderer, camera;
var cube;
var controls;

var child1;
var child2;
var child3;

var child1Axes;
var child2Axes;
var child3Axes;

var NinetyDegree = Math.PI / 2;

init();
lightSetup();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  
  // scene rotation
  //scene.rotation.x = -Math.PI / 2;
  //scene.updateMatrix();

  var gridXZ = new THREE.GridHelper(1000, 100);
  gridXZ.rotation.x = -Math.PI / 2;
  scene.add(gridXZ);

  var axes = new THREE.AxesHelper(1000);
  scene.add(axes);
  
  var geometry = new THREE.BoxGeometry(50, 5, 5);
  var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });
  var boxMesh = new THREE.Mesh(geometry, material);

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.y = 160;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  var plane = new THREE.Plane();
  
  var planeHelper = new THREE.PlaneHelper(plane, 100, 0xffff00);
  
  scene.add(planeHelper);
  
  // create axes for each child
  child1Axes = new THREE.AxesHelper(1000);
  child2Axes = new THREE.AxesHelper(1000);
  child3Axes = new THREE.AxesHelper(1000);
  
  // create the children meshes
  child1 = new THREE.Mesh();
  child2 = new THREE.Mesh();
  child3 = new THREE.Mesh();
  
  child3.add(boxMesh);
  
  child1.add(child2);
  
  child2.add(child3);
  
  child1.add(child1Axes);
  
  child2.add(child2Axes);
  
  child3.add(child3Axes);
  
  scene.add(child1);
 
  rotate(child2, NinetyDegree);
  
  move(child2, 20, 20)
  
  updatePlane(plane, child2);
  
  rotate(child1, NinetyDegree);
  
  move(child1, -100, 20);
  
  updatePlane(plane, child1);
}

function move(mesh, x, y, z) {
	mesh.position.add(new...