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

floating labels

Browse source
This commit is contained in:
Norman Köhring 2023-01-23 12:09:52 +01:00
parent 4a671e8019
commit 890c86e654
4 changed files with 62 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
index.html
View file

@ -11,7 +11,7 @@
display: flex;
place-items: center;
min-height: 100vh;
font: 16/1.5 sans-serif normal;
font: 16px monospace;
color-scheme: light dark;
color: #EEE;
background-color: #222;
@ -30,10 +30,24 @@
#info > button.highlighted {
border-color: yellow;
}
label {
position: fixed;
top: 0;
left: 0;
margin-top: -.5em;
margin-left: .5em;
font-weight: bold;
color: white;
pointer-events: none;
transform: translate(0, 0);
background: #0008;
line-height: 1;
}
</style>
</head>
<body>
<div id="info">Click a star to get options.</div>
<div id="labels"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

13
src/main.ts
View file

@ -1,4 +1,3 @@
import { IncomingMessage } from 'http'
import {
WebGLRenderer,
Scene,
@ -64,7 +63,7 @@ function init() {
let closest: Intersection<Object3D<Event>> | null = null
for (let i of intersections) {
if (i.distanceToRay === undefined) continue
if (i.distanceToRay === undefined) continue // ignore Lines
if (closest === null || i.distanceToRay < (closest.distanceToRay ?? 0)) {
closest = i
}
@ -86,8 +85,16 @@ function init() {
raycaster.intersectObject(stars, true, intersections)
renderer.render(scene, camera)
// update label positions in HTML space
// Attention: This has to happen after the render call, to avoid flickering
for (let star of stars.children) {
;(star as Star).setLabelPos(camera, w, h)
// set label z-index to distance to make them overlap intuitively
}
})
document.body.appendChild(renderer.domElement)
document.body.prepend(renderer.domElement)
}
init()

4
src/plane.ts
View file

@ -1,9 +1,7 @@
import { BufferGeometry, Group, Line, LineBasicMaterial, Shape, Vector3 } from 'three'
export function planeGeometry(radius: number, n = 5) {
const material = new LineBasicMaterial({
color: 0x303030,
})
const material = new LineBasicMaterial({ color: 0x205020 })
const plane = new Group()
const xLine = new BufferGeometry().setFromPoints([

50
src/stars.ts
View file

@ -8,6 +8,7 @@ import {
LineBasicMaterial,
Vector3,
Spherical,
Camera,
} from 'three'
import data from './testdata.json'
@ -25,9 +26,7 @@ export class Star extends Group {
public isStar = true
public starData: StarData
private tangentialCoords = new Vector3()
private cartesianCoords = new Vector3()
private sphericalCoords = new Spherical()
private coords = new Vector3()
private isHighlighted = false
private normalPointSize = 2
@ -40,30 +39,40 @@ export class Star extends Group {
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 labelEl = document.createElement('label')
private point: Points<BufferGeometry, PointsMaterial>
constructor(starData: StarData) {
super()
const { radius, phi, theta } = starData
this.starData = starData
this.sphericalCoords.set(radius, phi, theta)
this.cartesianCoords.setFromSpherical(this.sphericalCoords)
const { x, z } = this.cartesianCoords
this.tangentialCoords.set(x, 0, z)
const { radius, phi, theta } = starData
const sphericalCoords = new Spherical(radius, phi, theta)
this.coords.setFromSpherical(sphericalCoords)
this.poleLine.geometry.setFromPoints([this.cartesianCoords, this.tangentialCoords])
const { x, z } = this.coords
const tangentialCoords = new Vector3(x, 0, z)
this.add(this.poleLine)
// distance indicator / pole
const poleLine = new Line(new BufferGeometry(), this.lineMaterial)
poleLine.geometry.setFromPoints([this.coords, tangentialCoords])
this.add(poleLine)
const coords = [this.cartesianCoords.x, this.cartesianCoords.y, this.cartesianCoords.z]
// the actual "star"
const coords = [this.coords.x, this.coords.y, this.coords.z]
this.pointGeometry.setAttribute('position', new Float32BufferAttribute(coords, 3))
this.pointGeometry.setAttribute('color', this.whiteColor)
this.pointGeometry.computeBoundingSphere()
const point = new Points(this.pointGeometry, this.pointMaterial)
this.add(point)
this.point = new Points(this.pointGeometry, this.pointMaterial)
this.add(this.point)
// label
const container = document.getElementById('labels')!
this.labelEl.innerText = starData.name
container.appendChild(this.labelEl)
}
private setHighlight(isHighlight = true) {
@ -87,6 +96,19 @@ export class Star extends Group {
this.isHighlighted = !this.isHighlighted
this.setHighlight(this.isHighlighted)
}
public setLabelPos(camera: Camera, width: number, height: number) {
const dpr = window.devicePixelRatio
const pos = this.coords.clone()
pos.project(camera)
pos.x = Math.round((0.5 + pos.x / 2) * (width / dpr))
pos.y = Math.round((0.5 - pos.y / 2) * (height / dpr))
this.labelEl.style.transform = `translate(${pos.x}px, ${pos.y}px)`
const zIndex = `${10000000 - Math.round(pos.z * 10000000)}`
this.labelEl.style.zIndex = zIndex
}
}
export function renderStars(maxRadius: number) {