diff --git a/index.html b/index.html
index e2ebea8..bc8d8e2 100644
--- a/index.html
+++ b/index.html
@@ -27,10 +27,10 @@
backdrop-filter: blur(4px);
border-right: 2px solid #336;
transform: translate(0, 0);
- transition: transform .2 ease;
+ transition: transform .2s ease-out;
}
#info.hidden {
- transform: translate(-20rem, 0);
+ transform: translate(-22rem, 0);
}
label {
position: fixed;
@@ -44,9 +44,15 @@
background: #0008;
line-height: 1;
cursor: pointer;
+ transition: opacity .2s ease;
}
label.highlighted {
color: yellow;
+ z-index: 10000;
+ }
+ label.dimmed {
+ opacity: .3;
+ z-index: 0;
}
</style>
</head>
diff --git a/src/main.ts b/src/main.ts
index 5310c8f..4fb3c84 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -57,8 +57,8 @@ async function init() {
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1
})
document.addEventListener('click', () => {
- for (let star of stars.children) {
- ;(star as Star).highlighted = false
+ for (let star of stars.children as Star[]) {
+ star.highlighted = false
}
let closest: Intersection<Object3D<Event>> | null = null
@@ -83,12 +83,12 @@ async function init() {
}
})
- for (let child of stars.children) {
- ;(child as Star).labelEl.addEventListener('click', (event) => {
+ for (let child of stars.children as Star[]) {
+ child.labelEl.addEventListener('click', (event) => {
event.stopPropagation()
- for (let star of stars.children) {
- ;(star as Star).highlighted = false
+ for (let star of stars.children as Star[]) {
+ star.highlighted = false
}
const star = child as Star
@@ -108,15 +108,11 @@ async function init() {
const distanceToPlane = camera.position.distanceTo(plane.children[0].position)
- // update label positions in HTML space
+ // updating HTML space and the stars' color
// Attention: This has to happen after the render call, to avoid flickering
for (let star of stars.children as Star[]) {
star.setLabelPos(camera, w, h)
- if (camera.position.distanceTo(star.coords) > distanceToPlane) {
- star.dimLabel()
- } else {
- star.undimLabel()
- }
+ star.dimmed = camera.position.distanceTo(star.coords) > distanceToPlane
}
})
diff --git a/src/stars.ts b/src/stars.ts
index a548366..404c62a 100644
--- a/src/stars.ts
+++ b/src/stars.ts
@@ -26,11 +26,10 @@ export class Star extends Group {
public starData: StarData
public labelEl = document.createElement('label')
- private labelDimmed = false
-
public coords = new Vector3()
private isHighlighted = false
+ private isDimmed = false
private normalPointSize: number
private highlightedPointSize: number
@@ -39,9 +38,11 @@ export class Star extends Group {
private pointGeometry = new BufferGeometry()
private whiteColor = new Float32BufferAttribute([255, 255, 255], 3)
+ private grayColor = new Float32BufferAttribute([51, 51, 51], 3)
private yellowColor = new Float32BufferAttribute([255, 255, 0], 3)
private point: Points<BufferGeometry, PointsMaterial>
+ private pole: Line<BufferGeometry, LineBasicMaterial>
constructor(starData: StarData, maxRadius: number) {
super()
@@ -59,9 +60,9 @@ export class Star extends Group {
const tangentialCoords = new Vector3(x, 0, z)
// distance indicator / pole
- const poleLine = new Line(new BufferGeometry(), this.lineMaterial)
- poleLine.geometry.setFromPoints([this.coords, tangentialCoords])
- this.add(poleLine)
+ this.pole = new Line(new BufferGeometry(), this.lineMaterial)
+ this.pole.geometry.setFromPoints([this.coords, tangentialCoords])
+ this.add(this.pole)
// the actual "star"
const coords = [this.coords.x, this.coords.y, this.coords.z]
@@ -79,13 +80,28 @@ export class Star extends Group {
container.appendChild(this.labelEl)
}
- private setHighlight(isHighlight = true) {
- const color = isHighlight ? this.yellowColor : this.whiteColor
- this.pointGeometry.setAttribute('color', color)
- this.pointMaterial.setValues({
- size: isHighlight ? this.highlightedPointSize : this.normalPointSize,
- })
- this.labelEl.classList.toggle('highlighted', isHighlight)
+ private setAttributes() {
+ if (this.isDimmed && !this.isHighlighted) {
+ this.pointMaterial.setValues({ size: this.normalPointSize })
+ this.pointGeometry.setAttribute('color', this.grayColor)
+ this.lineMaterial.setValues({ color: 0x333333 })
+ this.labelEl.classList.remove('highlighted')
+ this.labelEl.classList.add('dimmed')
+ this.labelEl.style.zIndex = '0' // dimmed always in the back
+ } else if (this.isHighlighted) {
+ this.pointGeometry.setAttribute('color', this.yellowColor)
+ this.pointMaterial.setValues({ size: this.highlightedPointSize })
+ this.lineMaterial.setValues({ color: 0xffff00 })
+ this.labelEl.classList.remove('dimmed')
+ this.labelEl.classList.add('highlighted')
+ this.labelEl.style.zIndex = '10000' // highlights always on top
+ } else {
+ this.pointGeometry.setAttribute('color', this.whiteColor)
+ this.pointMaterial.setValues({ size: this.normalPointSize })
+ this.lineMaterial.setValues({ color: 0xffffff })
+ this.labelEl.classList.remove('highlighted')
+ this.labelEl.classList.remove('dimmed')
+ }
}
public get highlighted() {
@@ -94,12 +110,16 @@ export class Star extends Group {
public set highlighted(isHighlighted) {
this.isHighlighted = isHighlighted
- this.setHighlight(isHighlighted)
+ this.setAttributes()
}
- public toggleHighlight() {
- this.isHighlighted = !this.isHighlighted
- this.setHighlight(this.isHighlighted)
+ public get dimmed() {
+ return this.isDimmed
+ }
+
+ public set dimmed(isDimmed) {
+ this.isDimmed = isDimmed
+ this.setAttributes()
}
public setLabelPos(camera: Camera, width: number, height: number) {
@@ -112,24 +132,11 @@ export class Star extends Group {
this.labelEl.style.transform = `translate(${pos.x}px, ${pos.y}px)`
- if (this.labelDimmed) {
- this.labelEl.style.zIndex = '0'
- } else {
+ if (!this.isDimmed && !this.isHighlighted) {
const zIndex = `${10000000 - Math.round(pos.z * 10000000)}` // ridiculous
this.labelEl.style.zIndex = zIndex
}
}
-
- public dimLabel() {
- this.labelDimmed = true
- this.labelEl.style.opacity = '0.3'
- this.labelEl.style.zIndex = '0'
- }
-
- public undimLabel() {
- this.labelEl.style.opacity = '1'
- this.labelDimmed = false
- }
}
export async function renderStars(maxRadius: number) {