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

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";

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;

var child1Matrix = new THREE.Matrix4();
var child2Matrix = new THREE.Matrix4();

var originalPlane = new THREE.Plane();

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.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 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(10);
  child2Axes = new THREE.AxesHelper(10);
  child3Axes = new THREE.AxesHelper(10);
  
  // 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);
 ...