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/Load3DControls.vue

@@ -39,6 +39,8 @@
         v-model:show-grid="sceneConfig!.showGrid"
         v-model:background-color="sceneConfig!.backgroundColor"
         v-model:background-image="sceneConfig!.backgroundImage"
+        v-model:background-render-mode="sceneConfig!.backgroundRenderMode"
+        v-model:fov="cameraConfig!.fov"
         @update-background-image="handleBackgroundImageUpdate"
       />
 

src/components/load3d/Load3dViewerContent.vue

@@ -34,6 +34,8 @@
             <SceneControls
               v-model:background-color="viewer.backgroundColor.value"
               v-model:show-grid="viewer.showGrid.value"
+              v-model:background-render-mode="viewer.backgroundRenderMode.value"
+              v-model:fov="viewer.fov.value"
               :has-background-image="viewer.hasBackgroundImage.value"
               @update-background-image="viewer.handleBackgroundImageUpdate"
             />

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>

src/components/load3d/controls/PopupSlider.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="relative show-slider">
+    <Button class="p-button-rounded p-button-text" @click="toggleSlider">
+      <i
+        v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
+        :class="['pi', icon, 'text-lg text-white']"
+      />
+    </Button>
+    <div
+      v-show="showSlider"
+      class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg w-[150px]"
+    >
+      <Slider
+        v-model="value"
+        class="w-full"
+        :min="min"
+        :max="max"
+        :step="step"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Slider from 'primevue/slider'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const {
+  icon = 'pi-expand',
+  min = 10,
+  max = 150,
+  step = 1
+} = defineProps<{
+  icon?: string
+  tooltipText: string
+  min?: number
+  max?: number
+  step?: number
+}>()
+
+const value = defineModel<number>()
+const showSlider = ref(false)
+
+const toggleSlider = () => {
+  showSlider.value = !showSlider.value
+}
+
+const closeSlider = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+
+  if (!target.closest('.show-slider')) {
+    showSlider.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeSlider)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeSlider)
+})
+</script>

src/components/load3d/controls/SceneControls.vue

@@ -51,6 +51,28 @@
       </Button>
     </div>
 
+    <div v-if="hasBackgroundImage">
+      <Button
+        class="p-button-rounded p-button-text"
+        :class="{ 'p-button-outlined': backgroundRenderMode === 'panorama' }"
+        @click="toggleBackgroundRenderMode"
+      >
+        <i
+          v-tooltip.right="{
+            value: $t('load3d.panoramaMode'),
+            showDelay: 300
+          }"
+          class="pi pi-globe text-lg text-white"
+        />
+      </Button>
+    </div>
+
+    <PopupSlider
+      v-if="hasBackgroundImage && backgroundRenderMode === 'panorama'"
+      v-model="fov"
+      :tooltip-text="$t('load3d.fov')"
+    />
+
     <div v-if="hasBackgroundImage">
       <Button
         class="p-button-rounded p-button-text"
@@ -72,6 +94,9 @@
 import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 
+import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
+import type { BackgroundRenderModeType } from '@/extensions/core/load3d/interfaces'
+
 const emit = defineEmits<{
   (e: 'updateBackgroundImage', file: File | null): void
 }>()
@@ -79,6 +104,11 @@ const emit = defineEmits<{
 const showGrid = defineModel<boolean>('showGrid')
 const backgroundColor = defineModel<string>('backgroundColor')
 const backgroundImage = defineModel<string>('backgroundImage')
+const backgroundRenderMode = defineModel<BackgroundRenderModeType>(
+  'backgroundRenderMode',
+  { default: 'tiled' }
+)
+const fov = defineModel<number>('fov')
 const hasBackgroundImage = computed(
   () => backgroundImage.value && backgroundImage.value !== ''
 )
@@ -113,4 +143,9 @@ const uploadBackgroundImage = (event: Event) => {
 const removeBackgroundImage = () => {
   emit('updateBackgroundImage', null)
 }
+
+const toggleBackgroundRenderMode = () => {
+  backgroundRenderMode.value =
+    backgroundRenderMode.value === 'panorama' ? 'tiled' : 'panorama'
+}
 </script>

src/components/load3d/controls/viewer/ViewerSceneControls.vue

@@ -32,6 +32,24 @@
     </div>
 
     <div v-if="hasBackgroundImage" class="space-y-2">
+      <div class="flex gap-2">
+        <Button
+          :severity="backgroundRenderMode === 'tiled' ? 'primary' : 'secondary'"
+          :label="$t('load3d.tiledMode')"
+          icon="pi pi-th-large"
+          class="flex-1"
+          @click="setBackgroundRenderMode('tiled')"
+        />
+        <Button
+          :severity="
+            backgroundRenderMode === 'panorama' ? 'primary' : 'secondary'
+          "
+          :label="$t('load3d.panoramaMode')"
+          icon="pi pi-globe"
+          class="flex-1"
+          @click="setBackgroundRenderMode('panorama')"
+        />
+      </div>
       <Button
         severity="secondary"
         :label="$t('load3d.removeBackgroundImage')"
@@ -50,6 +68,9 @@ import { ref } from 'vue'
 
 const backgroundColor = defineModel<string>('backgroundColor')
 const showGrid = defineModel<boolean>('showGrid')
+const backgroundRenderMode = defineModel<'tiled' | 'panorama'>(
+  'backgroundRenderMode'
+)
 
 defineProps<{
   hasBackgroundImage?: boolean
@@ -77,4 +98,8 @@ const handleImageUpload = (event: Event) => {
 const removeBackgroundImage = () => {
   emit('updateBackgroundImage', null)
 }
+
+const setBackgroundRenderMode = (mode: 'tiled' | 'panorama') => {
+  backgroundRenderMode.value = mode
+}
 </script>