Update

README.md

@@ -3,7 +3,27 @@ Interactive Datacenter Visualization & Management with Three.js / WebGL.
 
 3D DC Insight is a browser-based datacenter management platform built on Three.js and WebGL. It transforms floor-plans, racks, servers and sensors into a real-time, interactive 3D world where operators can see, customize and act at a glance.
 
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm start
+```
+
 ### Features
+- Server room home view
+![home_view.png](images/snapshots/home_view.png)
+- 3D overview
+![overview.gif](images/snapshots/overview.gif)
+- View Racks
+![view_racks.gif](images/snapshots/view_racks.gif)
+- Door animation
+![door_animation.gif](images/snapshots/door_animation.gif)
+- Rack animation
+![rack_animation.gif](images/snapshots/rack_animation.gif)
 - Immersive 3D View
 - Drag-and-Drop Builder
 - Live Monitoring

global.css

@@ -0,0 +1,89 @@
+@charset "utf-8";
+* {
+  box-sizing: border-box;
+}
+html {
+  background-color: #fff;
+  color: #000;
+  font-size: 16px;
+}
+blockquote, body, button, dd, dl, figure, form, h1, h2, h3, h4, h5, h6, input, legend, ol, p, pre, td, textarea, th, ul, xmp {
+  margin: 0;
+  padding: 0;
+}
+body, button, code, input, kbd, pre, samp, select, textarea, tt, xmp {
+  line-height: 1.5;
+}
+big, button, h1, h2, h3, h4, h5, h6, input, select, small, textarea {
+  font-size: 100%;
+}
+h1, h2, h3, h4, h5, h6 {
+  font-family: tahoma, arial, "Hiragino Sans GB", "微软雅黑", simsun, sans-serif;
+}
+b, h1, h2, h3, h4, h5, h6, strong {
+  font-weight: 400;
+}
+address, cite, dfn, em, i, optgroup, var {
+  font-style: normal;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  text-align: left;
+}
+caption, th {
+  text-align: inherit;
+}
+menu, ol, ul {
+  list-style: none;
+}
+img {
+  border: 0;
+}
+button, img, input, object, select, textarea {
+  vertical-align: middle;
+}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+audio, canvas, video {
+  display: inline-block;
+}
+blockquote:after, blockquote:before, q:after, q:before {
+  content: "\0020";
+}
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+a, button, input, select, textarea {
+  border: none;
+  outline: 0 none;
+}
+button::-moz-focus-inner, input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+mark {
+  background-color: transparent;
+}
+a, del, ins, s, u {
+  text-decoration: none;
+}
+sub, sup {
+  vertical-align: baseline;
+}
+html {
+  height: 100%;
+  overflow-x: hidden;
+}
+body {
+  color: #333;
+  font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;
+  line-height: 1;
+}
+a {
+  color: #25a4bb;
+  text-decoration: none;
+}
+