JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

console.clear();

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.127.0/build/three.module.js";
import {
  OrbitControls
} from "https://cdn.jsdelivr.net/npm/three@0.127.0/examples/jsm/controls/OrbitControls.js";


let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.setScalar(10);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let g1 = GridGeometry(5, 5, 4, 3, [0, 0]);
let m1 = new THREE.LineBasicMaterial({color: "yellow"});
let grid1 = new THREE.LineSegments(g1, m1);
scene.add(grid1);

let g2 = GridGeometry(5, 3, 4, 2, [1, 1], ["x", Math.PI * 0.5]);
let m2 = new THREE.LineBasicMaterial({color: "magenta"});
let grid2 = new THREE.LineSegments(g2, m2);
scene.add(grid2);

let g3 = GridGeometry(3, 5, 2, 3, [1, 0], ["y", Math.PI * -0.5]);
let m3 = new THREE.LineBasicMaterial({color: "aqua"});
let grid3 = new THREE.LineSegments(g3, m3);
scene.add(grid3);

renderer.setAnimationLoop(_ => {
  renderer.render(scene, camera);
})

function GridGeometry(width = 1, height = 1, wSeg = 1, hSeg = 1, lExt = [0, 0], rot = ["x", 0]){
	
  let seg = new THREE.Vector2(width / wSeg, height / hSeg);
  let hlfSeg = seg.clone().multiplyScalar(0.5);
  
  let axis = rot[0] == "x" ? new THREE.Vector3(1, 0, 0) : new THREE.Vector3(0, 1, 0);
  let rotAngle = rot[1];
  
  let pts = [], sprite, count=0;
  
  for(let y = 0; y <= hSeg; y++){
  	pts.push(
    	new THREE.Vector3(0, y * seg.y, 0).applyAxisAngle(axis, rotAngle),
      new THREE.Vector3(width + (hlfSeg.x * lExt[0]), y * seg.y, 0).applyAxisAngle(axis, rotAngle)
    )
    if(lExt[0]>0){
    let msg = 'pt'+count
    	sprite = makeTextSprite(msg, {})
      scene.add(sprite)
      sprite.position.set(width + (hlfSeg.x * lExt[0]) + 0.75, y * seg.y ,...