updated colors

script.js

@@ -5,13 +5,18 @@ let metrics = {
     roomHighlightOpacity : 0.6,
     roomHighlightDuration : 0.3,
     roomUnhighlightDuration : 0.3,
-    ringColor : 'lightsalmon',
     ringThickness : 0.4,
     ringTicks : 60,
-    ringTickColor : 'orangered',
     ringTickLength : 1,
     ringTickDimension : 0.07,
-    animationCurve : TWEEN.Easing.Cubic.InOut
+    animationCurve : TWEEN.Easing.Cubic.InOut,
+
+    // colors
+    backgroundColor : '#363537',
+    color1 : '#EF2D56',
+    color2 : '#ED7D3A',
+    color3 : '#8CD867',
+    color4 : '#2FBF71'
 }
 
 const scene = new THREE.Scene()
@@ -35,7 +40,7 @@ document.body.appendChild( renderer.domElement )
 const light = new THREE.AmbientLight(0xFFAAAA, 1)
 light.position.z = 100
 scene.add(light)
-scene.background = new THREE.Color("white")
+scene.background = new THREE.Color(metrics.backgroundColor)
 
 // back the camera up
 camera.position.z = 25
@@ -241,7 +246,7 @@ function configureScene(data) {
         areaData[room.name] = room
 
         let roomGeo = new THREE.BoxGeometry(room.w, room.h, room.d)
-        let roomColor = new THREE.Color(room.color)
+        let roomColor = new THREE.Color(metrics.color1)
         let roomBoxMaterial = new THREE.MeshPhysicalMaterial({ color: roomColor })
         roomBoxMaterial.transparent = true
         roomBoxMaterial.opacity = metrics.roomDefaultOpacity
@@ -250,7 +255,7 @@ function configureScene(data) {
         roomContainer.add(roomMesh)
 
         let roomEdgesGeo = new THREE.EdgesGeometry(roomGeo)
-        let roomLinesMaterial = new THREE.LineBasicMaterial({ color: roomColor })
+        let roomLinesMaterial = new THREE.LineBasicMaterial({ color: new THREE.Color(metrics.color2) })
         roomLinesMaterial.transparent = true
         roomLinesMaterial.linewidth = 3
         let roomLines = new THREE.LineSegments(roomEdgesGeo, roomLinesMaterial)
@@ -262,7 +267,7 @@ function configureScene(data) {
         setPosition(roomContainer, room.x, room.y, roomZ, room.w, room.h, room.d)
         home.add(roomContainer)
 
-        let roomLabel = createTextMesh(room.name, room.color)
+        let roomLabel = createTextMesh(room.name, metrics.color1)
         roomLabel.material.opacity = 0
         roomLabel.userData.name = room.name + "LABEL"
 
@@ -355,7 +360,7 @@ function configureScene(data) {
     let ringGeo = new THREE.RingGeometry(ringDimension - metrics.ringThickness / 2,
         ringDimension + metrics.ringThickness / 2,
         128)
-    let ringMaterial = new THREE.MeshBasicMaterial( { color: new THREE.Color(metrics.ringColor), side: THREE.DoubleSide } )
+    let ringMaterial = new THREE.MeshBasicMaterial( { color: new THREE.Color(metrics.color3), side: THREE.DoubleSide } )
     ringMaterial.transparent = true
     let ring = new THREE.Mesh(ringGeo, ringMaterial)
     ring.userData.name = "ring"
@@ -370,7 +375,7 @@ function configureScene(data) {
 
         let tickContainer = new THREE.Group()
         let tickColor = new THREE.Color('black')
-        let tickMaterial = new THREE.MeshPhysicalMaterial({ color: new THREE.Color(metrics.ringTickColor) })
+        let tickMaterial = new THREE.MeshPhysicalMaterial({ color: new THREE.Color(metrics.color4) })
         tickMaterial.transparent = true
         let tickMesh = new THREE.Mesh(tickGeo, tickMaterial)
         tickContainer.rotation.z = tickRadians