FloorPlan Viz

by brainsengineering

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/Detector.js"></script>
<div id="container"></div>

CSS

body {
			color: #000;
			font-family: Monospace;
			font-size: 13px;
			text-align: center;
			font-weight: bold;

			background-color: #fff;
			margin: 0px;
			overflow: hidden;
		}

		#info {
			color: #000;
			position: absolute;
			top: 0px;
			width: 100%;
			padding: 5px;
		}

		a {
			color: red;
		}

JavaScript

/* eslint-disable */
//if (!Detector.webgl)
//    Detector.addGetWebGLMessage();

var camera, controls, scene, renderer;

init();
//render(); // remove when using next line for animation loop (requestAnimationFrame)
animate();

function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0);

    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    var container = document.getElementById("container");
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);
    camera.position.set(-0, 0, 360);

    // controls

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

    controls.enableDamping = true;
    // an animation loop is required when either damping or auto-rotation are enabled
    controls.dampingFactor = 0.25;

    controls.screenSpacePanning = false;

    controls.minDistance = 100;
    controls.maxDistance = 500;

    controls.maxPolarAngle = 3.14/2;//Math.PI / 2;

    // world
  

    //Load the data.
    new THREE.FileLoader().load("https://www.brainsen.com/planimetrie-json.txt", function(data) {
        data = JSON.parse(data);
        var vi = 0;
        var points = new Array(data.geometry.length * 2);
        for (var i = 0; i < data.geometry.length; i++) {
            var ln = data.geometry[i];
            points[i * 2] = new THREE.Vector3(ln[0],ln[1],0);
            points[(i * 2) + 1] = new THREE.Vector3(ln[2],ln[3],0);
        }
        var ngeom = new THREE.BufferGeometry().setFromPoints(points);
        var nmesh = new THREE.LineSegments(ngeom,new THREE.LineBasicMaterial({
          color:0x10ff10,
          opacity:0.02,
          blending:THREE.AdditiveBlending,
          transparent:true}));
        
        //Compute the bounding box and center the model on the bounding box center.
       ...