n/stellar-neighbours
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adds buttons to highlight stars

Browse source
This commit is contained in:
Norman Köhring 2023-01-22 19:43:44 +01:00
parent fd2f52f39f
commit d2b31f895a
3 changed files with 40 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
index.html
View file

@ -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;
}
</style>
</head>
<body>
<div id="info">...</div>
<div id="info"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

6
src/main.ts
View file

@ -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)

39
src/stars.ts
View file

@ -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