From 8c3af654fcbb1d5be73fbad5340ace4010169c95 Mon Sep 17 00:00:00 2001 From: Peter Hajas Date: Sun, 8 May 2022 17:27:59 -0600 Subject: [PATCH] updated colors --- script.js | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/script.js b/script.js index 92c186f..8d3d889 100644 --- a/script.js +++ b/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