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>

src/components/load3d/Load3DControls.vue

@@ -26,27 +26,100 @@
         class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
       />
     </Button>
+
+    <div class="relative" v-if="showLightIntensityButton">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="toggleLightIntensity"
+      >
+        <i class="pi pi-sun text-white text-lg"></i>
+      </Button>
+      <div
+        v-show="showLightIntensity"
+        class="absolute left-12 top-0 bg-black bg-opacity-50 p-4 rounded-lg shadow-lg"
+        style="width: 150px"
+      >
+        <Slider
+          v-model="lightIntensity"
+          class="w-full"
+          @change="updateLightIntensity"
+          :min="1"
+          :max="20"
+          :step="1"
+        />
+      </div>
+    </div>
+
+    <div class="relative" v-if="showFOVButton">
+      <Button class="p-button-rounded p-button-text" @click="toggleFOV">
+        <i class="pi pi-expand text-white text-lg"></i>
+      </Button>
+      <div
+        v-show="showFOV"
+        class="absolute left-12 top-0 bg-black bg-opacity-50 p-4 rounded-lg shadow-lg"
+        style="width: 150px"
+      >
+        <Slider
+          v-model="fov"
+          class="w-full"
+          @change="updateFOV"
+          :min="10"
+          :max="150"
+          :step="1"
+        />
+      </div>
+    </div>
+
+    <div v-if="showPreviewButton">
+      <Button class="p-button-rounded p-button-text" @click="togglePreview">
+        <i
+          :class="[
+            'pi',
+            showPreview ? 'pi-eye' : 'pi-eye-slash',
+            'text-white text-lg'
+          ]"
+        ></i>
+      </Button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { ref } from 'vue'
+import Slider from 'primevue/slider'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps<{
   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: 'updateBackgroundColor', color: string): void
+  (e: 'updateLightIntensity', value: number): void
+  (e: 'updateFOV', value: number): void
+  (e: 'togglePreview', value: boolean): void
 }>()
 
 const backgroundColor = ref(props.backgroundColor)
 const showGrid = ref(props.showGrid)
+const showPreview = ref(props.showPreview)
 const colorPickerRef = ref<HTMLInputElement | null>(null)
+const lightIntensity = ref(props.lightIntensity)
+const showLightIntensity = ref(false)
+const showLightIntensityButton = ref(props.showLightIntensityButton)
+const fov = ref(props.fov)
+const showFOV = ref(false)
+const showFOVButton = ref(props.showFOVButton)
+const showPreviewButton = ref(props.showPreviewButton)
 
 const toggleCamera = () => {
   emit('toggleCamera')
@@ -57,6 +130,11 @@ const toggleGrid = () => {
   emit('toggleGrid', showGrid.value)
 }
 
+const togglePreview = () => {
+  showPreview.value = !showPreview.value
+  emit('togglePreview', showPreview.value)
+}
+
 const updateBackgroundColor = (color: string) => {
   emit('updateBackgroundColor', color)
 }
@@ -65,8 +143,46 @@ const openColorPicker = () => {
   colorPickerRef.value?.click()
 }
 
+const toggleLightIntensity = () => {
+  showLightIntensity.value = !showLightIntensity.value
+}
+
+const updateLightIntensity = () => {
+  emit('updateLightIntensity', lightIntensity.value)
+}
+
+const toggleFOV = () => {
+  showFOV.value = !showFOV.value
+}
+
+const updateFOV = () => {
+  emit('updateFOV', fov.value)
+}
+
+const closeSlider = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+
+  if (!target.closest('.relative')) {
+    showLightIntensity.value = false
+    showFOV.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeSlider)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeSlider)
+})
+
 defineExpose({
   backgroundColor,
-  showGrid
+  showGrid,
+  lightIntensity,
+  showLightIntensityButton,
+  fov,
+  showFOVButton,
+  showPreviewButton
 })
 </script>