Treat top left coords as center coords

css/app.css

@@ -1 +1 @@
-body,html{width:100%;height:100%;padding:0;margin:0;overflow:hidden;}canvas{width:100%;height:100%;}.debug #svg{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;}
+body,html{width:100%;height:100%;padding:0;margin:0;overflow:hidden;background-color:black;}canvas{width:100%;height:100%;}#svg{display:none;}.debug #svg{display:block;position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;}

index.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="css/app.css" type="text/css">
     
 </head>
-<body class="debug">
+<body class="">
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="node_modules/three/three.js"></script>
     <script src="index.js"></script>

index.js

@@ -46,8 +46,8 @@ function onRoomData(data) {
             cube = new THREE.Mesh( geometry, material );
         }
 
-        cube.position.x = room.position.x;
-        cube.position.y = room.position.y * -1; // FIXME why flipped?
+        cube.position.x = room.position.x + room.dimensions.width / 2;
+        cube.position.y = room.position.y * -1 - room.dimensions.height / 2; // FIXME why flipped?
         cube.name = room.number;
 
         cubes.push(cube);

scss/app.scss

@@ -6,12 +6,17 @@ html
     padding: 0;
     margin: 0;
     overflow: hidden;
+    background-color: black;
 }
 canvas {
     width: 100%;
     height: 100%;
 }
+#svg {
+    display: none;
+}
 .debug #svg{
+    display: block;
     position: absolute;
     top: 0;
     bottom: 0;