diff --git a/script.js b/script.js index 107f0f5..92c186f 100644 --- a/script.js +++ b/script.js @@ -4,7 +4,13 @@ let metrics = { roomDefaultOpacity : 0.15, roomHighlightOpacity : 0.6, roomHighlightDuration : 0.3, - roomUnhighlightDuration: 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() {