support panoramic image in 3d node (#6638)

## Summary

Adds panoramic image support to the 3D node viewer, allowing users to
display equirectangular panoramic images as immersive backgrounds
alongside the existing tiled image mode.

## Changes

- Toggle between tiled and panorama rendering modes for background
images
- Field of view (FOV) control for panorama mode
- Refactored FOV slider into reusable PopupSlider component

## Screenshots


https://github.com/user-attachments/assets/8955d74b-b0e6-4b26-83ca-ccf902b43aa6

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6638-support-panoramic-image-in-3d-node-2a56d73d365081b98647f988130e312e)
by [Unito](https://www.unito.io)

src/components/load3d/controls/CameraControls.vue

@@ -6,65 +6,30 @@
           value: $t('load3d.switchCamera'),
           showDelay: 300
         }"
-        :class="['pi', getCameraIcon, 'text-lg text-white']"
+        :class="['pi', 'pi-camera', 'text-lg text-white']"
       />
     </Button>
-    <div v-if="showFOVButton" class="show-fov relative">
-      <Button class="p-button-rounded p-button-text" @click="toggleFOV">
-        <i
-          v-tooltip.right="{ value: $t('load3d.fov'), showDelay: 300 }"
-          class="pi pi-expand text-lg text-white"
-        />
-      </Button>
-      <div
-        v-show="showFOV"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
-        style="width: 150px"
-      >
-        <Slider v-model="fov" class="w-full" :min="10" :max="150" :step="1" />
-      </div>
-    </div>
+    <PopupSlider
+      v-if="showFOVButton"
+      v-model="fov"
+      :tooltip-text="$t('load3d.fov')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import Slider from 'primevue/slider'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed } from 'vue'
 
+import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
 import type { CameraType } from '@/extensions/core/load3d/interfaces'
 
-const showFOV = ref(false)
-
 const cameraType = defineModel<CameraType>('cameraType')
 const fov = defineModel<number>('fov')
 const showFOVButton = computed(() => cameraType.value === 'perspective')
-const getCameraIcon = computed(() => {
-  return cameraType.value === 'perspective' ? 'pi-camera' : 'pi-camera'
-})
-
-const toggleFOV = () => {
-  showFOV.value = !showFOV.value
-}
 
 const switchCamera = () => {
   cameraType.value =
     cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
 }
-
-const closeCameraSlider = (e: MouseEvent) => {
-  const target = e.target as HTMLElement
-
-  if (!target.closest('.show-fov')) {
-    showFOV.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', closeCameraSlider)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', closeCameraSlider)
-})
 </script>