Spawn3DObject.svelte

<script lang="ts">
	import { T, useThrelte, useTask } from '@threlte/core'
	import { Vector3, PerspectiveCamera, Group } from 'three'
	import type { Spawn3DItem } from './spawn3dStore'

	let { item }: { item: Spawn3DItem } = $props()

	const { camera, size } = useThrelte()

	let group = $state<Group>()

	// Internal State for locking mechanics
	let cachedNDC: { x: number; y: number } | null = null
	// svelte-ignore state_referenced_locally
	let previousLockMode = item.lockAt

	// Reusables to prevent GC
	const vec = new Vector3()
	const pos = new Vector3()
	const camDir = new Vector3()
	const REF_DISTANCE = 5.0 // Reference for absolute sizing

	// Helper: Compute NDC from current DOM rect
	const computeNDC = () => {
		const { top, left, width, height } = item
		return {
			x: ((left + width / 2) / $size.width) * 2 - 1,
			y: -((top + height / 2) / $size.height) * 2 + 1
		}
	}

	// --- TRANSITION LOGIC ---
	// Handle switching between modes (e.g., locking current position)
	$effect(() => {
		if (item.lockAt !== previousLockMode) {
			if (item.lockAt === 'camera') {
				// Transitioning TO Camera: Freeze current position
				cachedNDC = computeNDC()
			} else if (item.lockAt === 'element') {
				// Transitioning TO Element: Unfreeze
				cachedNDC = null
			}
			previousLockMode = item.lockAt
		}
	})

	useTask(() => {
		if (!group || !$camera) return
		const cam = $camera as PerspectiveCamera

		// 1. VISIBILITY CHECK
		const isVisible = item.visibleOverride && (item.autoHide ? item.visible : true)
		group.visible = isVisible
		if (!isVisible) return

		// 2. LOCK MODE LOGIC
		if (item.lockAt === 'none') return // Stop updating (Detached)

		let xNDC, yNDC

		if (item.lockAt === 'camera') {
			// Use cached coordinates (HUD mode)
			// Safety: If cachedNDC is null (e.g. spawned directly as 'camera'), calculate once now.
			if (!cachedNDC) cachedNDC = computeNDC()
			xNDC = cachedNDC.x
			yNDC = cachedNDC.y
		} else {
			// 'element': Calculate fresh every frame
			const current = computeNDC()
			xNDC = current.x
			yNDC = current.y
		}

		// 3. SPATIAL MATH
		// Unproject NDC to Direction Vector
		vec.set(xNDC, yNDC, 0.5)
		vec.unproject(cam)
		vec.sub(cam.position).normalize()

		const dist = item.distance

		// 4. SCALING
		// Determine the distance used for sizing calculations
		// If absoluteSizing is ON, we pretend the object is at REF_DISTANCE
		// If OFF, we use the actual distance (so it scales up/down to look constant)
		const scalingDistance = item.absoluteSizing ? REF_DISTANCE : dist

		// Calculate Perpendicular Distance (Project vector onto camera forward axis)
		// This prevents "Hypotenuse Effect" distortion at screen edges
		cam.getWorldDirection(camDir)
		const perpDist = scalingDistance * vec.dot(camDir)

		// Calculate Scale to match pixels
		const fovRad = (cam.fov * Math.PI) / 180
		const visibleHeight = 2 * perpDist * Math.tan(fovRad / 2)
		const unitsPerPixel = visibleHeight / $size.height

		group.scale.set(unitsPerPixel, unitsPerPixel, unitsPerPixel)

		// 5. POSITIONING
		// Position is always based on actual distance
		pos.copy(cam.position).add(vec.multiplyScalar(dist))
		group.position.set(pos.x, pos.y, pos.z)

		// 6. ROTATION
		// Always face the camera plane (Billboarding)
		group.quaternion.copy(cam.quaternion)
	})
</script>

<T.Group bind:ref={group}>
	{@render item.snippet?.(item)}
</T.Group>