JSFiddle - React, Tailwind, and code Playground

treejs office map

by Csaba Hellinger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

JavaScript

var container, camera, scene, renderer, raycaster, objects, mouse;

init();
animate();

function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.OrthographicCamera(
    	window.innerWidth / -2, 
        window.innerWidth / 2,
        window.innerHeight / 2, 
        window.innerHeight / -2, 
        -500, 
        1000
    );
    camera.position.x = 200;
    camera.position.y = 100;
    camera.position.z = 200;

    scene = new THREE.Scene();
    objects = [];
    mouse = new THREE.Vector2();

    // Grid

    var size = 300, step = 50;
    var geometry = new THREE.Geometry();
    for (var i = - size; i <= size; i += step) {
        geometry.vertices.push(new THREE.Vector3(-size, 0, i));
        geometry.vertices.push(new THREE.Vector3( size, 0, i));
        geometry.vertices.push(new THREE.Vector3(i, 0, -size));
        geometry.vertices.push(new THREE.Vector3(i, 0,  size));
    }

    var material = new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2});

    var line = new THREE.LineSegments(geometry, material);
    scene.add(line);

    // Cubes

    var geometry = new THREE.BoxGeometry(50, 50, 50);
    var material = new THREE.MeshLambertMaterial({color: 0xffffff, overdraw: 0.5});

    for (var i = 0; i < 5; i += 1) {
        var cube = new THREE.Mesh(geometry, material);
        cube.position.x = Math.random() * size * 2 - size;
        cube.position.z = Math.random() * size * 2 - size;
        cube.position.y = 25;
        scene.add(cube);
        objects.push(cube);
    }
    
    // Floor
    
    var shape = new THREE.Shape(),
    	points = [[0,0],[1,0],[1,0.75],[0.75,1],[0,1]],
        x, y;
    for (var i = 0; i < points.length; i += 1) {
    	x = points[i][0] * size * 2 - size;
        y = points[i][1] * size * 2 - size;        
    	if (i === 0) {
	        shape.moveTo(x, y);
        } else {
		    shape.lineTo(x, y);    
        }
    }
    var extrudeSettings = {...