feat: add custom experimental waypints impl

Author: zardoy

experiments/three-labels.html

@@ -0,0 +1,5 @@
+<script type="module" src="three-labels.ts"></script>
+<style>
+  body { margin: 0; }
+  canvas { display: block; }
+</style>

experiments/three-labels.ts

@@ -0,0 +1,67 @@
+import * as THREE from 'three'
+import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js'
+import { createWaypointSprite, WAYPOINT_CONFIG } from '../renderer/viewer/three/waypointSprite'
+
+// Create scene, camera and renderer
+const scene = new THREE.Scene()
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+const renderer = new THREE.WebGLRenderer({ antialias: true })
+renderer.setSize(window.innerWidth, window.innerHeight)
+document.body.appendChild(renderer.domElement)
+
+// Add FirstPersonControls
+const controls = new FirstPersonControls(camera, renderer.domElement)
+controls.lookSpeed = 0.1
+controls.movementSpeed = 10
+controls.lookVertical = true
+controls.constrainVertical = true
+controls.verticalMin = 0.1
+controls.verticalMax = Math.PI - 0.1
+
+// Position camera
+camera.position.y = 1.6 // Typical eye height
+camera.lookAt(0, 1.6, -1)
+
+// Create a helper grid and axes
+const grid = new THREE.GridHelper(20, 20)
+scene.add(grid)
+const axes = new THREE.AxesHelper(5)
+scene.add(axes)
+
+// Create waypoint sprite via utility
+const waypoint = createWaypointSprite({
+  position: new THREE.Vector3(0, 0, -5),
+  color: 0xff0000,
+  label: 'Target',
+})
+scene.add(waypoint.group)
+
+// Use built-in offscreen arrow from utils
+waypoint.enableOffscreenArrow(true)
+waypoint.setArrowParent(scene)
+
+// Animation loop
+function animate() {
+  requestAnimationFrame(animate)
+
+  const delta = Math.min(clock.getDelta(), 0.1)
+  controls.update(delta)
+
+  // Unified camera update (size, distance text, arrow, visibility)
+  const sizeVec = renderer.getSize(new THREE.Vector2())
+  waypoint.updateForCamera(camera.position, camera, sizeVec.width, sizeVec.height)
+
+  renderer.render(scene, camera)
+}
+
+// Handle window resize
+window.addEventListener('resize', () => {
+  camera.aspect = window.innerWidth / window.innerHeight
+  camera.updateProjectionMatrix()
+  renderer.setSize(window.innerWidth, window.innerHeight)
+})
+
+// Add clock for controls
+const clock = new THREE.Clock()
+
+animate()

renderer/viewer/three/graphicsBackend.ts

@@ -44,6 +44,9 @@ const getBackendMethods = (worldRenderer: WorldRendererThree) => {
     shakeFromDamage: worldRenderer.cameraShake.shakeFromDamage.bind(worldRenderer.cameraShake),
     onPageInteraction: worldRenderer.media.onPageInteraction.bind(worldRenderer.media),
     downloadMesherLog: worldRenderer.downloadMesherLog.bind(worldRenderer),
+
+    addWaypoint: worldRenderer.waypoints.addWaypoint.bind(worldRenderer.waypoints),
+    removeWaypoint: worldRenderer.waypoints.removeWaypoint.bind(worldRenderer.waypoints),
   }
 }