[3d] support using image as background (#2657)

Co-authored-by: github-actions <github-actions@github.com>

src/components/load3d/Load3D.vue

@@ -9,6 +9,7 @@
       :fov="fov"
       :cameraType="cameraType"
       :showPreview="showPreview"
+      :backgroundImage="backgroundImage"
       @materialModeChange="listenMaterialModeChange"
       @backgroundColorChange="listenBackgroundColorChange"
       @lightIntensityChange="listenLightIntensityChange"
@@ -16,6 +17,7 @@
       @cameraTypeChange="listenCameraTypeChange"
       @showGridChange="listenShowGridChange"
       @showPreviewChange="listenShowPreviewChange"
+      @backgroundImageChange="listenBackgroundImageChange"
     />
     <Load3DControls
       :backgroundColor="backgroundColor"
@@ -27,6 +29,8 @@
       :showFOVButton="showFOVButton"
       :showPreviewButton="showPreviewButton"
       :cameraType="cameraType"
+      :hasBackgroundImage="hasBackgroundImage"
+      @updateBackgroundImage="handleBackgroundImageUpdate"
       @switchCamera="switchCamera"
       @toggleGrid="toggleGrid"
       @updateBackgroundColor="handleBackgroundColorChange"
@@ -42,6 +46,7 @@ import { computed, ref } from 'vue'
 
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
+import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 
 const props = defineProps<{
   node: any
@@ -57,6 +62,8 @@ const showLightIntensityButton = ref(true)
 const fov = ref(75)
 const showFOVButton = ref(true)
 const cameraType = ref<'perspective' | 'orthographic'>('perspective')
+const hasBackgroundImage = ref(false)
+const backgroundImage = ref('')
 
 const showPreviewButton = computed(() => {
   return !props.type.includes('Preview')
@@ -89,6 +96,19 @@ const handleUpdateLightIntensity = (value: number) => {
   node.value.properties['Light Intensity'] = lightIntensity.value
 }
 
+const handleBackgroundImageUpdate = async (file: File | null) => {
+  if (!file) {
+    hasBackgroundImage.value = false
+    backgroundImage.value = ''
+    node.value.properties['Background Image'] = ''
+    return
+  }
+
+  backgroundImage.value = await Load3dUtils.uploadFile(file)
+
+  node.value.properties['Background Image'] = backgroundImage.value
+}
+
 const handleUpdateFOV = (value: number) => {
   fov.value = value
 
@@ -137,4 +157,12 @@ const listenShowGridChange = (value: boolean) => {
 const listenShowPreviewChange = (value: boolean) => {
   showPreview.value = value
 }
+
+const listenBackgroundImageChange = (value: string) => {
+  backgroundImage.value = value
+
+  if (backgroundImage.value && backgroundImage.value !== '') {
+    hasBackgroundImage.value = true
+  }
+}
 </script>