diff --git a/index.html b/index.html index 96098a1..0c2d023 100644 --- a/index.html +++ b/index.html @@ -19,13 +19,21 @@ #info { position: absolute; top: 1em; - right: 2em; + right: 1em; text-align: right; } + #info > button { + margin: 0 .1em; + border: 1px solid #DDD; + border-radius: .5em; + } + #info > button.highlighted { + border-color: yellow; + } -
...
+
diff --git a/src/main.ts b/src/main.ts index b954daa..f31f971 100644 --- a/src/main.ts +++ b/src/main.ts @@ -60,11 +60,7 @@ function init() { intersections.length = 0 raycaster.intersectObject(stars, false, intersections) - - for (let intersection of intersections) { - intersection - } - + if (intersections.length) console.log(intersections) renderer.render(scene, camera) }) document.body.appendChild(renderer.domElement) diff --git a/src/stars.ts b/src/stars.ts index 7e08023..1347a08 100644 --- a/src/stars.ts +++ b/src/stars.ts @@ -6,7 +6,6 @@ import { Group, Line, LineBasicMaterial, - Scene, Vector3, Spherical, } from 'three' @@ -26,10 +25,13 @@ class Star extends Group { private tangentialCoords = new Vector3() private cartesianCoords = new Vector3() private sphericalCoords = new Spherical() - private isHighlighted = false private lineMaterial = new LineBasicMaterial({ color: 0xffffff }) private pointMaterial = new PointsMaterial({ size: 1, vertexColors: true }) + private pointGeometry = new BufferGeometry() + + private whiteColor = new Float32BufferAttribute([255, 255, 255], 3) + private yellowColor = new Float32BufferAttribute([255, 255, 0], 3) private poleLine = new Line(new BufferGeometry(), this.lineMaterial) @@ -47,22 +49,39 @@ class Star extends Group { this.add(this.poleLine) - const geometry = new BufferGeometry() const coords = [this.cartesianCoords.x, this.cartesianCoords.y, this.cartesianCoords.z] - geometry.setAttribute('position', new Float32BufferAttribute(coords, 3)) - geometry.setAttribute('color', new Float32BufferAttribute([255, 255, 255], 3)) - geometry.computeBoundingSphere() + this.pointGeometry.setAttribute('position', new Float32BufferAttribute(coords, 3)) + this.pointGeometry.setAttribute('color', this.whiteColor) + this.pointGeometry.computeBoundingSphere() - const point = new Points(geometry, this.pointMaterial) + const point = new Points(this.pointGeometry, this.pointMaterial) this.add(point) } + + setHighlight(isHighlight = true) { + this.pointGeometry.setAttribute('color', isHighlight ? this.yellowColor : this.whiteColor) + } } export function renderStars(maxRadius: number) { const group = new Group() - data.forEach((star) => { - if (star.radius > maxRadius) return - group.add(new Star(star)) + const infoEl = document.getElementById('info')! + + data.forEach((starData) => { + if (starData.radius > maxRadius) return + const star = new Star(starData) + group.add(star) + + let highlighted = false + + const btnEl = document.createElement('button') + btnEl.addEventListener('click', () => { + highlighted = !highlighted + star.setHighlight(highlighted) + btnEl.classList.toggle('highlighted', highlighted) + }) + btnEl.innerText = starData.name + infoEl.appendChild(btnEl) }) return group