Add grid visibility toggle prop

TODO.md

@@ -38,7 +38,7 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
 ### Scene Helpers
 - [x] Add ground grid helper (XZ plane)
 - [x] Add axis helper (RGB arrows for X/Y/Z)
-- [ ] Add option to toggle grid visibility
+- [x] Add option to toggle grid visibility
 - [ ] Add option to toggle axis visibility
 
 ### Camera Controls

src/components/Viewport.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import * as THREE from 'three'
 
+const props = withDefaults(
+  defineProps<{
+    showGrid?: boolean
+  }>(),
+  {
+    showGrid: true,
+  }
+)
+
 const containerRef = ref<HTMLDivElement | null>(null)
 
 let scene: THREE.Scene
@@ -9,6 +18,7 @@ let camera: THREE.PerspectiveCamera
 let renderer: THREE.WebGLRenderer
 let animationFrameId: number
 let resizeObserver: ResizeObserver
+let gridHelper: THREE.GridHelper
 
 function initScene() {
   if (!containerRef.value) return
@@ -49,10 +59,18 @@ function initScene() {
 }
 
 function addGridHelper() {
-  const gridHelper = new THREE.GridHelper(10, 10, 0x444444, 0x333333)
+  gridHelper = new THREE.GridHelper(10, 10, 0x444444, 0x333333)
+  gridHelper.visible = props.showGrid
   scene.add(gridHelper)
 }
 
+watch(
+  () => props.showGrid,
+  (visible) => {
+    if (gridHelper) gridHelper.visible = visible
+  }
+)
+
 function addAxisHelper() {
   const axisHelper = new THREE.AxesHelper(5)
   scene.add(axisHelper)