Add axis visibility toggle prop

TODO.md

@@ -39,7 +39,7 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
 - [x] Add ground grid helper (XZ plane)
 - [x] Add axis helper (RGB arrows for X/Y/Z)
 - [x] Add option to toggle grid visibility
-- [ ] Add option to toggle axis visibility
+- [x] Add option to toggle axis visibility
 
 ### Camera Controls
 - [ ] Install and configure OrbitControls (zoom, pan, orbit)

src/components/Viewport.vue

@@ -5,9 +5,11 @@ import * as THREE from 'three'
 const props = withDefaults(
   defineProps<{
     showGrid?: boolean
+    showAxis?: boolean
   }>(),
   {
     showGrid: true,
+    showAxis: true,
   }
 )
 
@@ -19,6 +21,7 @@ let renderer: THREE.WebGLRenderer
 let animationFrameId: number
 let resizeObserver: ResizeObserver
 let gridHelper: THREE.GridHelper
+let axisHelper: THREE.AxesHelper
 
 function initScene() {
   if (!containerRef.value) return
@@ -72,10 +75,18 @@ watch(
 )
 
 function addAxisHelper() {
-  const axisHelper = new THREE.AxesHelper(5)
+  axisHelper = new THREE.AxesHelper(5)
+  axisHelper.visible = props.showAxis
   scene.add(axisHelper)
 }
 
+watch(
+  () => props.showAxis,
+  (visible) => {
+    if (axisHelper) axisHelper.visible = visible
+  }
+)
+
 function addLighting() {
   // Ambient light for base illumination
   const ambientLight = new THREE.AmbientLight(0xffffff, 0.4)