Some pulsing ticks

script.js

@@ -5,6 +5,12 @@ 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
 }
 
@@ -343,6 +349,46 @@ function configureScene(data) {
         label.position.y += (unitY * 6)
         label.position.z += (unitZ * 6)
     }
+
+    let ringDimension = Math.max(xExtent, yExtent) * 0.8
+
+    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 } )
+    ringMaterial.transparent = true
+    let ring = new THREE.Mesh(ringGeo, ringMaterial)
+    ring.userData.name = "ring"
+    ring.position.x = homeCenterX
+    ring.position.y = homeCenterY
+    home.add(ring)
+
+    let tickGeo = new THREE.BoxGeometry(metrics.ringTickDimension, metrics.ringTickLength, metrics.ringTickDimension)
+    for (var tickIndex = 0; tickIndex < metrics.ringTicks; tickIndex++) {
+        let tickRadianStep = (2 * Math.PI) / metrics.ringTicks
+        let tickRadians = tickRadianStep * tickIndex
+
+        let tickContainer = new THREE.Group()
+        let tickColor = new THREE.Color('black')
+        let tickMaterial = new THREE.MeshPhysicalMaterial({ color: new THREE.Color(metrics.ringTickColor) })
+        tickMaterial.transparent = true
+        let tickMesh = new THREE.Mesh(tickGeo, tickMaterial)
+        tickContainer.rotation.z = tickRadians
+        tickMesh.position.y = ringDimension
+        tickContainer.add(tickMesh)
+        ring.add(tickContainer)
+
+        tickContainer.userData.name = tickIndex
+        tickMesh.userData.name = "box"
+
+        let tickPulse = new TWEEN.Tween(tickMesh.scale)
+        .easing(metrics.animationCurve)
+        .delay(THREE.MathUtils.randFloat(0, 4000))
+        .to( { y: 2 }, 1000 )
+        .yoyo(true)
+        .repeat(Infinity)
+        .start()
+    }
 }
 
 async function loadHomeData() {