Light fov UI change (#2492)

src/components/load3d/Load3DAnimationControls.vue

@@ -3,9 +3,18 @@
     <Load3DControls
       :backgroundColor="backgroundColor"
       :showGrid="showGrid"
+      :showPreview="showPreview"
+      :lightIntensity="lightIntensity"
+      :showLightIntensityButton="showLightIntensityButton"
+      :fov="fov"
+      :showFOVButton="showFOVButton"
+      :showPreviewButton="showPreviewButton"
       @toggleCamera="onToggleCamera"
       @toggleGrid="onToggleGrid"
+      @togglePreview="onTogglePreview"
       @updateBackgroundColor="onUpdateBackgroundColor"
+      @updateLightIntensity="onUpdateLightIntensity"
+      @updateFOV="onUpdateFOV"
       ref="load3dControlsRef"
     />
 
@@ -56,15 +65,24 @@ const props = defineProps<{
   playing: boolean
   backgroundColor: string
   showGrid: boolean
+  showPreview: boolean
+  lightIntensity: number
+  showLightIntensityButton: boolean
+  fov: number
+  showFOVButton: boolean
+  showPreviewButton: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'toggleCamera'): void
   (e: 'toggleGrid', value: boolean): void
+  (e: 'togglePreview', value: boolean): void
   (e: 'updateBackgroundColor', color: string): void
   (e: 'togglePlay', value: boolean): void
   (e: 'speedChange', value: number): void
   (e: 'animationChange', value: number): void
+  (e: 'updateLightIntensity', value: number): void
+  (e: 'updateFOV', value: number): void
 }>()
 
 const animations = ref(props.animations)
@@ -73,6 +91,12 @@ const selectedSpeed = ref(1)
 const selectedAnimation = ref(0)
 const backgroundColor = ref(props.backgroundColor)
 const showGrid = ref(props.showGrid)
+const showPreview = ref(props.showPreview)
+const lightIntensity = ref(props.lightIntensity)
+const showLightIntensityButton = ref(props.showLightIntensityButton)
+const fov = ref(props.fov)
+const showFOVButton = ref(props.showFOVButton)
+const showPreviewButton = ref(props.showPreviewButton)
 const load3dControlsRef = ref(null)
 
 const speedOptions = [
@@ -87,13 +111,36 @@ watch(backgroundColor, (newValue) => {
   load3dControlsRef.value.backgroundColor = newValue
 })
 
+watch(showLightIntensityButton, (newValue) => {
+  load3dControlsRef.value.showLightIntensityButton = newValue
+})
+
+watch(showFOVButton, (newValue) => {
+  load3dControlsRef.value.showFOVButton = newValue
+})
+
+watch(showPreviewButton, (newValue) => {
+  load3dControlsRef.value.showPreviewButton = newValue
+})
+
 const onToggleCamera = () => {
   emit('toggleCamera')
 }
 const onToggleGrid = (value: boolean) => emit('toggleGrid', value)
+const onTogglePreview = (value: boolean) => {
+  emit('togglePreview', value)
+}
 const onUpdateBackgroundColor = (color: string) =>
   emit('updateBackgroundColor', color)
 
+const onUpdateLightIntensity = (lightIntensity: number) => {
+  emit('updateLightIntensity', lightIntensity)
+}
+
+const onUpdateFOV = (fov: number) => {
+  emit('updateFOV', fov)
+}
+
 const togglePlay = () => {
   playing.value = !playing.value
   emit('togglePlay', playing.value)
@@ -112,6 +159,10 @@ defineExpose({
   selectedAnimation,
   playing,
   backgroundColor,
-  showGrid
+  showGrid,
+  lightIntensity,
+  showLightIntensityButton,
+  fov,
+  showFOVButton
 })
 </script>