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 { #info {
position: absolute; position: absolute;
top: 1em; top: 1em;
right: 2em; right: 1em;
text-align: right; text-align: right;
} }
#info > button {
margin: 0 .1em;
border: 1px solid #DDD;
border-radius: .5em;
}
#info > button.highlighted {
border-color: yellow;
}
</style> </style>
</head> </head>
<body> <body>
<div id="info">...</div> <div id="info"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

6
src/main.ts
View file

@ -60,11 +60,7 @@ function init() {
intersections.length = 0 intersections.length = 0
raycaster.intersectObject(stars, false, intersections) raycaster.intersectObject(stars, false, intersections)
if (intersections.length) console.log(intersections)
for (let intersection of intersections) {
intersection
}
renderer.render(scene, camera) renderer.render(scene, camera)
}) })
document.body.appendChild(renderer.domElement) document.body.appendChild(renderer.domElement)

39
src/stars.ts
View file

@ -6,7 +6,6 @@ import {
Group, Group,
Line, Line,
LineBasicMaterial, LineBasicMaterial,
Scene,
Vector3, Vector3,
Spherical, Spherical,
} from 'three' } from 'three'
@ -26,10 +25,13 @@ class Star extends Group {
private tangentialCoords = new Vector3() private tangentialCoords = new Vector3()
private cartesianCoords = new Vector3() private cartesianCoords = new Vector3()
private sphericalCoords = new Spherical() private sphericalCoords = new Spherical()
private isHighlighted = false
private lineMaterial = new LineBasicMaterial({ color: 0xffffff }) private lineMaterial = new LineBasicMaterial({ color: 0xffffff })
private pointMaterial = new PointsMaterial({ size: 1, vertexColors: true }) 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) private poleLine = new Line(new BufferGeometry(), this.lineMaterial)
@ -47,22 +49,39 @@ class Star extends Group {
this.add(this.poleLine) this.add(this.poleLine)
const geometry = new BufferGeometry()
const coords = [this.cartesianCoords.x, this.cartesianCoords.y, this.cartesianCoords.z] const coords = [this.cartesianCoords.x, this.cartesianCoords.y, this.cartesianCoords.z]
geometry.setAttribute('position', new Float32BufferAttribute(coords, 3)) this.pointGeometry.setAttribute('position', new Float32BufferAttribute(coords, 3))
geometry.setAttribute('color', new Float32BufferAttribute([255, 255, 255], 3)) this.pointGeometry.setAttribute('color', this.whiteColor)
geometry.computeBoundingSphere() this.pointGeometry.computeBoundingSphere()
const point = new Points(geometry, this.pointMaterial) const point = new Points(this.pointGeometry, this.pointMaterial)
this.add(point) this.add(point)
} }
setHighlight(isHighlight = true) {
this.pointGeometry.setAttribute('color', isHighlight ? this.yellowColor : this.whiteColor)
}
} }
export function renderStars(maxRadius: number) { export function renderStars(maxRadius: number) {
const group = new Group() const group = new Group()
data.forEach((star) => { const infoEl = document.getElementById('info')!
if (star.radius > maxRadius) return
group.add(new Star(star)) 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 return group