JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawcdn.githack.com/donmccurdy/three-pathfinding/master/dist/three-pathfinding.umd.js"></script>

<script>
class CSG {
    constructor() {
        this.polygons = [];
    }
    clone() {
        var csg = new CSG();
        csg.polygons = this.polygons.map(function(p) {
            return p.clone();
        });
        return csg;
    }

    toPolygons() {
        return this.polygons;
    }

    union(csg) {
        var a = new Node(this.clone().polygons);
        var b = new Node(csg.clone().polygons);
        a.clipTo(b);
        b.clipTo(a);
        b.invert();
        b.clipTo(a);
        b.invert();
        a.build(b.allPolygons());
        return CSG.fromPolygons(a.allPolygons());
    }

    subtract(csg) {
        var a = new Node(this.clone().polygons);
        var b = new Node(csg.clone().polygons);
        a.invert();
        a.clipTo(b);
        b.clipTo(a);
        b.invert();
        b.clipTo(a);
        b.invert();
        a.build(b.allPolygons());
        a.invert();
        return CSG.fromPolygons(a.allPolygons());
    }

    intersect(csg) {
        var a = new Node(this.clone().polygons);
        var b = new Node(csg.clone().polygons);
        a.invert();
        b.clipTo(a);
        b.invert();
        a.clipTo(b);
        b.clipTo(a);
        a.build(b.allPolygons());
        a.invert();
        return CSG.fromPolygons(a.allPolygons());
    }

    // Return a new CSG solid with solid and empty space switched. This solid is
    // not modified.
    inverse() {
        var csg = this.clone();
        csg.polygons.map(function(p) {
            p.flip();
        });
        return csg;
    }
}

// Construct a CSG solid from a list of `Polygon` instances.
CSG.fromPolygons=function(polygons) {
    var csg = new CSG();
    csg.polygons = polygons;
    return csg;
}

// # class Vector

//...

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xccccff);
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 800);
    camera.lookAt(scene.position);
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    // light    
    var light = new THREE.PointLight(0xffffff);
    light.position.set(100, 250, 250);
    scene.add(light);

    // mesh
  var n = .01
  var geom = new THREE.Geometry();
  var board = [
    [ 1, 0],
    [ 0, 1]
];
  
    var sphereGeometry = new THREE.BoxGeometry(50*n, 50*n, 50*n);
    var sphereMaterial = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
       var sp = new THREE.Mesh(sphereGeometry, sphereMaterial);
    var m = []
     for(var y = 0; y < board.length; y++){
        for(var x = 0; x < board[y].length; x++){
            //Draw a wall
            if(board[y][x] === 1){
 
 var wall = {
 posX: x,
 posZ: y
 }
 //console.log("this x", x)
 m.push(wall)
   var sphere = new THREE.Mesh(new THREE.BoxGeometry(50*n, 50*n, 50*n));
    sphere.position.x = x*1
    sphere.position.y = y*1
            //scene.add(sphere)
   // sphere.position.y = 5
      
    geom.mergeMesh(sphere);
   // geom.mergeVertices(); // optional

            }
        }
     }
     
     
  /* for(var i = 0; i<m.length; i++){
    var sphere = new THREE.Mesh(new THREE.BoxGeometry(50*n, 50*n, 50*n));
  // sphere.position.x = m[i].posX;
  // sphere.position.z = m[i].posZ;
  if(i == 1)sphere.position.y =  1
           //...