[3d] extract controls classes (#2948)

src/components/load3d/Load3DControls.vue

@@ -30,245 +30,46 @@
     </div>
 
     <div v-show="activeCategory" class="bg-gray-700 bg-opacity-30 rounded-lg">
-      <div v-if="activeCategory === 'scene'" class="flex flex-col">
+      <SceneControls
-        <Button
+        v-if="activeCategory === 'scene'"
-          class="p-button-rounded p-button-text"
+        :backgroundColor="backgroundColor"
-          :class="{ 'p-button-outlined': showGrid }"
+        :showGrid="showGrid"
-          @click="toggleGrid"
+        :hasBackgroundImage="hasBackgroundImage"
-        >
+        @toggleGrid="handleToggleGrid"
-          <i
+        @updateBackgroundColor="handleBackgroundColorChange"
-            class="pi pi-table text-white text-lg"
+        @updateBackgroundImage="handleBackgroundImageUpdate"
-            v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
+        ref="sceneControlsRef"
-          ></i>
+      />
-        </Button>
 
-        <div v-if="!hasBackgroundImage">
+      <ModelControls
-          <Button
+        v-if="activeCategory === 'model'"
-            class="p-button-rounded p-button-text"
+        :upDirection="upDirection"
-            @click="openColorPicker"
+        :materialMode="materialMode"
-          >
+        :isAnimation="isAnimation"
-            <i
+        :edgeThreshold="edgeThreshold"
-              class="pi pi-palette text-white text-lg"
+        @updateUpDirection="handleUpdateUpDirection"
-              v-tooltip.right="{
+        @updateMaterialMode="handleUpdateMaterialMode"
-                value: t('load3d.backgroundColor'),
+        @updateEdgeThreshold="handleUpdateEdgeThreshold"
-                showDelay: 300
+        ref="modelControlsRef"
-              }"
+      />
-            ></i>
-            <input
-              type="color"
-              ref="colorPickerRef"
-              :value="backgroundColor"
-              @input="
-                updateBackgroundColor(($event.target as HTMLInputElement).value)
-              "
-              class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
-            />
-          </Button>
-        </div>
 
-        <div v-if="!hasBackgroundImage">
+      <CameraControls
-          <Button
+        v-if="activeCategory === 'camera'"
-            class="p-button-rounded p-button-text"
+        :cameraType="cameraType"
-            @click="openImagePicker"
+        :fov="fov"
-          >
+        :showFOVButton="showFOVButton"
-            <i
+        @switchCamera="switchCamera"
-              class="pi pi-image text-white text-lg"
+        @updateFOV="handleUpdateFOV"
-              v-tooltip.right="{
+        ref="cameraControlsRef"
-                value: t('load3d.uploadBackgroundImage'),
+      />
-                showDelay: 300
-              }"
-            ></i>
-            <input
-              type="file"
-              ref="imagePickerRef"
-              accept="image/*"
-              @change="uploadBackgroundImage"
-              class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
-            />
-          </Button>
-        </div>
 
-        <div v-if="hasBackgroundImage">
+      <LightControls
-          <Button
+        v-if="activeCategory === 'light'"
-            class="p-button-rounded p-button-text"
+        :lightIntensity="lightIntensity"
-            @click="removeBackgroundImage"
+        :showLightIntensityButton="showLightIntensityButton"
-          >
+        @updateLightIntensity="handleUpdateLightIntensity"
-            <i
+        ref="lightControlsRef"
-              class="pi pi-times text-white text-lg"
+      />
-              v-tooltip.right="{
-                value: t('load3d.removeBackgroundImage'),
-                showDelay: 300
-              }"
-            ></i>
-          </Button>
-        </div>
-      </div>
-
-      <div v-if="activeCategory === 'model'" class="flex flex-col">
-        <div class="relative show-up-direction">
-          <Button
-            class="p-button-rounded p-button-text"
-            @click="toggleUpDirection"
-          >
-            <i
-              class="pi pi-arrow-up text-white text-lg"
-              v-tooltip.right="{
-                value: t('load3d.upDirection'),
-                showDelay: 300
-              }"
-            ></i>
-          </Button>
-          <div
-            v-show="showUpDirection"
-            class="absolute left-12 top-0 bg-black bg-opacity-50 rounded-lg shadow-lg"
-          >
-            <div class="flex flex-col">
-              <Button
-                v-for="direction in upDirections"
-                :key="direction"
-                class="p-button-text text-white"
-                :class="{ 'bg-blue-500': upDirection === direction }"
-                @click="selectUpDirection(direction)"
-              >
-                {{ formatOption(direction) }}
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <div class="relative show-material-mode">
-          <Button
-            class="p-button-rounded p-button-text"
-            @click="toggleMaterialMode"
-          >
-            <i
-              class="pi pi-box text-white text-lg"
-              v-tooltip.right="{
-                value: t('load3d.materialMode'),
-                showDelay: 300
-              }"
-            ></i>
-          </Button>
-          <div
-            v-show="showMaterialMode"
-            class="absolute left-12 top-0 bg-black bg-opacity-50 rounded-lg shadow-lg"
-          >
-            <div class="flex flex-col">
-              <Button
-                v-for="mode in materialModes"
-                :key="mode"
-                class="p-button-text text-white"
-                :class="{ 'bg-blue-500': materialMode === mode }"
-                @click="selectMaterialMode(mode)"
-              >
-                {{ formatMaterialMode(mode) }}
-              </Button>
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="activeCategory === 'model' && materialMode === 'lineart'"
-          class="relative show-edge-threshold"
-        >
-          <Button
-            class="p-button-rounded p-button-text"
-            @click="toggleEdgeThreshold"
-          >
-            <i
-              class="pi pi-sliders-h text-white text-lg"
-              v-tooltip.right="{
-                value: t('load3d.edgeThreshold'),
-                showDelay: 300
-              }"
-            ></i>
-          </Button>
-          <div
-            v-show="showEdgeThreshold"
-            class="absolute left-12 top-0 bg-black bg-opacity-50 p-4 rounded-lg shadow-lg"
-            style="width: 150px"
-          >
-            <label class="text-white text-xs mb-1 block"
-              >{{ t('load3d.edgeThreshold') }}: {{ edgeThreshold }}°</label
-            >
-            <Slider
-              v-model="edgeThreshold"
-              class="w-full"
-              @change="updateEdgeThreshold"
-              :min="0"
-              :max="120"
-              :step="1"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div v-if="activeCategory === 'camera'" class="flex flex-col">
-        <Button class="p-button-rounded p-button-text" @click="switchCamera">
-          <i
-            :class="['pi', getCameraIcon, 'text-white text-lg']"
-            v-tooltip.right="{
-              value: t('load3d.switchCamera'),
-              showDelay: 300
-            }"
-          ></i>
-        </Button>
-        <div class="relative show-fov" v-if="showFOVButton">
-          <Button class="p-button-rounded p-button-text" @click="toggleFOV">
-            <i
-              class="pi pi-expand text-white text-lg"
-              v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
-            ></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>
-
-      <div v-if="activeCategory === 'light'" class="flex flex-col">
-        <div
-          class="relative show-light-intensity"
-          v-if="showLightIntensityButton"
-        >
-          <Button
-            class="p-button-rounded p-button-text"
-            @click="toggleLightIntensity"
-          >
-            <i
-              class="pi pi-sun text-white text-lg"
-              v-tooltip.right="{
-                value: t('load3d.lightIntensity'),
-                showDelay: 300
-              }"
-            ></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>
     </div>
     <div v-if="showPreviewButton">
       <Button class="p-button-rounded p-button-text" @click="togglePreview">
@@ -288,9 +89,12 @@
 <script setup lang="ts">
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
-import Slider from 'primevue/slider'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
+import CameraControls from '@/components/load3d/controls/CameraControls.vue'
+import LightControls from '@/components/load3d/controls/LightControls.vue'
+import ModelControls from '@/components/load3d/controls/ModelControls.vue'
+import SceneControls from '@/components/load3d/controls/SceneControls.vue'
 import {
   CameraType,
   MaterialMode,
@@ -372,8 +176,6 @@ const showFOV = ref(false)
 const showFOVButton = ref(props.showFOVButton)
 const showPreviewButton = ref(props.showPreviewButton)
 const hasBackgroundImage = ref(props.hasBackgroundImage)
-const imagePickerRef = ref<HTMLInputElement | null>(null)
-const showUpDirection = ref(false)
 const upDirections: UpDirection[] = [
   'original',
   '-x',
@@ -383,42 +185,12 @@ const upDirections: UpDirection[] = [
   '-z',
   '+z'
 ]
-const showMaterialMode = ref(false)
 const edgeThreshold = ref(props.edgeThreshold)
-const showEdgeThreshold = ref(false)
-
-const toggleEdgeThreshold = () => {
-  showEdgeThreshold.value = !showEdgeThreshold.value
-}
-
-const materialModes = computed(() => {
-  const modes: MaterialMode[] = [
-    'original',
-    'normal',
-    'wireframe'
-    //'depth' disable for now
-  ]
-
-  if (!props.isAnimation) {
-    modes.push('lineart')
-  }
-
-  return modes
-})
-
-const notMaterialLineart = computed(() => {
-  return props.materialMode !== 'lineart'
-})
 
 const switchCamera = () => {
   emit('switchCamera')
 }
 
-const toggleGrid = () => {
-  showGrid.value = !showGrid.value
-  emit('toggleGrid', showGrid.value)
-}
-
 const togglePreview = () => {
   showPreview.value = !showPreview.value
   emit('togglePreview', showPreview.value)
@@ -428,20 +200,40 @@ const updateBackgroundColor = (color: string) => {
   emit('updateBackgroundColor', color)
 }
 
-const openColorPicker = () => {
+const handleToggleGrid = (value: boolean) => {
-  colorPickerRef.value?.click()
+  emit('toggleGrid', value)
 }
 
-const toggleLightIntensity = () => {
+const handleBackgroundColorChange = (value: string) => {
-  showLightIntensity.value = !showLightIntensity.value
+  emit('updateBackgroundColor', value)
+}
+
+const handleBackgroundImageUpdate = (file: File | null) => {
+  emit('updateBackgroundImage', file)
+}
+
+const handleUpdateUpDirection = (direction: UpDirection) => {
+  emit('updateUpDirection', direction)
+}
+
+const handleUpdateMaterialMode = (mode: MaterialMode) => {
+  emit('updateMaterialMode', mode)
+}
+
+const handleUpdateEdgeThreshold = (value: number) => {
+  emit('updateEdgeThreshold', value)
+}
+
+const handleUpdateLightIntensity = (value: number) => {
+  emit('updateLightIntensity', value)
 }
 
 const updateLightIntensity = () => {
   emit('updateLightIntensity', lightIntensity.value)
 }
 
-const toggleFOV = () => {
+const handleUpdateFOV = (value: number) => {
-  showFOV.value = !showFOV.value
+  emit('updateFOV', value)
 }
 
 const updateFOV = () => {
@@ -452,63 +244,12 @@ const updateEdgeThreshold = () => {
   emit('updateEdgeThreshold', edgeThreshold.value)
 }
 
-const toggleUpDirection = () => {
-  showUpDirection.value = !showUpDirection.value
-}
-
-const selectUpDirection = (direction: UpDirection) => {
-  upDirection.value = direction
-  emit('updateUpDirection', direction)
-}
-
-const formatOption = (option: string) => {
-  if (option === 'original') return 'Original'
-  return option.toUpperCase()
-}
-
-const toggleMaterialMode = () => {
-  showMaterialMode.value = !showMaterialMode.value
-}
-
-const selectMaterialMode = (mode: MaterialMode) => {
-  materialMode.value = mode
-  emit('updateMaterialMode', mode)
-}
-
-const formatMaterialMode = (mode: MaterialMode) => {
-  return mode.charAt(0).toUpperCase() + mode.slice(1)
-}
-
 const closeSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 
   if (!target.closest('.show-menu')) {
     isMenuOpen.value = false
   }
-
-  if (!target.closest('.show-fov')) {
-    showFOV.value = false
-  }
-
-  if (!target.closest('.show-light-intensity')) {
-    showLightIntensity.value = false
-  }
-
-  if (!target.closest('.show-up-direction')) {
-    showUpDirection.value = false
-  }
-
-  if (!target.closest('.show-material-mode')) {
-    showMaterialMode.value = false
-  }
-
-  if (!target.closest('.show-edge-threshold')) {
-    showEdgeThreshold.value = false
-  }
-}
-
-const openImagePicker = () => {
-  imagePickerRef.value?.click()
 }
 
 watch(
@@ -520,22 +261,6 @@ watch(
   }
 )
 
-const uploadBackgroundImage = (event: Event) => {
-  const input = event.target as HTMLInputElement
-
-  hasBackgroundImage.value = true
-
-  if (input.files && input.files[0]) {
-    emit('updateBackgroundImage', input.files[0])
-  }
-}
-
-const removeBackgroundImage = () => {
-  hasBackgroundImage.value = false
-
-  emit('updateBackgroundImage', null)
-}
-
 watch(
   () => props.backgroundColor,
   (newValue) => {
@@ -629,8 +354,4 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('click', closeSlider)
 })
-
-const getCameraIcon = computed(() => {
-  return props.cameraType === 'perspective' ? 'pi-camera' : 'pi-camera'
-})
 </script>

src/components/load3d/Load3DScene.vue

@@ -73,7 +73,6 @@ watchEffect(() => {
     rawLoad3d.togglePreview(props.showPreview)
     rawLoad3d.setBackgroundImage(props.backgroundImage)
     rawLoad3d.setUpDirection(props.upDirection)
-    rawLoad3d.setEdgeThreshold(props.edgeThreshold)
   }
 })
 
@@ -88,6 +87,17 @@ watch(
   }
 )
 
+watch(
+  () => props.edgeThreshold,
+  (newValue) => {
+    if (load3d.value) {
+      const rawLoad3d = toRaw(load3d.value)
+
+      rawLoad3d.setEdgeThreshold(newValue)
+    }
+  }
+)
+
 const emit = defineEmits<{
   (e: 'materialModeChange', materialMode: string): void
   (e: 'backgroundColorChange', color: string): void

src/components/load3d/controls/CameraControls.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="flex flex-col">
+    <Button class="p-button-rounded p-button-text" @click="switchCamera">
+      <i
+        :class="['pi', getCameraIcon, 'text-white text-lg']"
+        v-tooltip.right="{
+          value: t('load3d.switchCamera'),
+          showDelay: 300
+        }"
+      ></i>
+    </Button>
+    <div class="relative show-fov" v-if="showFOVButton">
+      <Button class="p-button-rounded p-button-text" @click="toggleFOV">
+        <i
+          class="pi pi-expand text-white text-lg"
+          v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
+        ></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>
+</template>
+
+<script setup lang="ts">
+import { Tooltip } from 'primevue'
+import Button from 'primevue/button'
+import Slider from 'primevue/slider'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { CameraType } from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
+
+const vTooltip = Tooltip
+
+const props = defineProps<{
+  cameraType: CameraType
+  fov: number
+  showFOVButton: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'switchCamera'): void
+  (e: 'updateFOV', value: number): void
+}>()
+
+const cameraType = ref(props.cameraType)
+const fov = ref(props.fov)
+const showFOVButton = ref(props.showFOVButton)
+const showFOV = ref(false)
+
+watch(
+  () => props.fov,
+  (newValue) => {
+    fov.value = newValue
+  }
+)
+
+watch(
+  () => props.showFOVButton,
+  (newValue) => {
+    showFOVButton.value = newValue
+  }
+)
+
+watch(
+  () => props.cameraType,
+  (newValue) => {
+    cameraType.value = newValue
+  }
+)
+
+const switchCamera = () => {
+  emit('switchCamera')
+}
+
+const toggleFOV = () => {
+  showFOV.value = !showFOV.value
+}
+
+const updateFOV = () => {
+  emit('updateFOV', fov.value)
+}
+
+const getCameraIcon = computed(() => {
+  return props.cameraType === 'perspective' ? 'pi-camera' : 'pi-camera'
+})
+
+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/LightControls.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="flex flex-col">
+    <div class="relative show-light-intensity" v-if="showLightIntensityButton">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="toggleLightIntensity"
+      >
+        <i
+          class="pi pi-sun text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.lightIntensity'),
+            showDelay: 300
+          }"
+        ></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>
+</template>
+
+<script setup lang="ts">
+import { Tooltip } from 'primevue'
+import Button from 'primevue/button'
+import Slider from 'primevue/slider'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { t } from '@/i18n'
+
+const vTooltip = Tooltip
+
+const props = defineProps<{
+  lightIntensity: number
+  showLightIntensityButton: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'updateLightIntensity', value: number): void
+}>()
+
+const lightIntensity = ref(props.lightIntensity)
+const showLightIntensityButton = ref(props.showLightIntensityButton)
+const showLightIntensity = ref(false)
+
+watch(
+  () => props.lightIntensity,
+  (newValue) => {
+    lightIntensity.value = newValue
+  }
+)
+
+watch(
+  () => props.showLightIntensityButton,
+  (newValue) => {
+    showLightIntensityButton.value = newValue
+  }
+)
+
+const toggleLightIntensity = () => {
+  showLightIntensity.value = !showLightIntensity.value
+}
+
+const updateLightIntensity = () => {
+  emit('updateLightIntensity', lightIntensity.value)
+}
+
+const closeLightSlider = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+
+  if (!target.closest('.show-light-intensity')) {
+    showLightIntensity.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeLightSlider)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeLightSlider)
+})
+</script>

src/components/load3d/controls/ModelControls.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="flex flex-col">
+    <div class="relative show-up-direction">
+      <Button class="p-button-rounded p-button-text" @click="toggleUpDirection">
+        <i
+          class="pi pi-arrow-up text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.upDirection'),
+            showDelay: 300
+          }"
+        ></i>
+      </Button>
+      <div
+        v-show="showUpDirection"
+        class="absolute left-12 top-0 bg-black bg-opacity-50 rounded-lg shadow-lg"
+      >
+        <div class="flex flex-col">
+          <Button
+            v-for="direction in upDirections"
+            :key="direction"
+            class="p-button-text text-white"
+            :class="{ 'bg-blue-500': upDirection === direction }"
+            @click="selectUpDirection(direction)"
+          >
+            {{ formatOption(direction) }}
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative show-material-mode">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="toggleMaterialMode"
+      >
+        <i
+          class="pi pi-box text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.materialMode'),
+            showDelay: 300
+          }"
+        ></i>
+      </Button>
+      <div
+        v-show="showMaterialMode"
+        class="absolute left-12 top-0 bg-black bg-opacity-50 rounded-lg shadow-lg"
+      >
+        <div class="flex flex-col">
+          <Button
+            v-for="mode in materialModes"
+            :key="mode"
+            class="p-button-text text-white"
+            :class="{ 'bg-blue-500': materialMode === mode }"
+            @click="selectMaterialMode(mode)"
+          >
+            {{ formatMaterialMode(mode) }}
+          </Button>
+        </div>
+      </div>
+    </div>
+    <div v-if="materialMode === 'lineart'" class="relative show-edge-threshold">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="toggleEdgeThreshold"
+      >
+        <i
+          class="pi pi-sliders-h text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.edgeThreshold'),
+            showDelay: 300
+          }"
+        ></i>
+      </Button>
+      <div
+        v-show="showEdgeThreshold"
+        class="absolute left-12 top-0 bg-black bg-opacity-50 p-4 rounded-lg shadow-lg"
+        style="width: 150px"
+      >
+        <label class="text-white text-xs mb-1 block"
+          >{{ t('load3d.edgeThreshold') }}: {{ edgeThreshold }}°</label
+        >
+        <Slider
+          v-model="edgeThreshold"
+          class="w-full"
+          @change="updateEdgeThreshold"
+          :min="0"
+          :max="120"
+          :step="1"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Tooltip } from 'primevue'
+import Button from 'primevue/button'
+import Slider from 'primevue/slider'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
+
+const vTooltip = Tooltip
+
+const props = defineProps<{
+  upDirection: UpDirection
+  materialMode: MaterialMode
+  isAnimation: boolean
+  edgeThreshold?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'updateUpDirection', direction: UpDirection): void
+  (e: 'updateMaterialMode', mode: MaterialMode): void
+  (e: 'updateEdgeThreshold', value: number): void
+}>()
+
+const upDirection = ref(props.upDirection || 'original')
+const materialMode = ref(props.materialMode || 'original')
+const edgeThreshold = ref(props.edgeThreshold || 85)
+const showUpDirection = ref(false)
+const showMaterialMode = ref(false)
+const showEdgeThreshold = ref(false)
+
+const upDirections: UpDirection[] = [
+  'original',
+  '-x',
+  '+x',
+  '-y',
+  '+y',
+  '-z',
+  '+z'
+]
+
+const materialModes = computed(() => {
+  const modes: MaterialMode[] = [
+    'original',
+    'normal',
+    'wireframe'
+    //'depth' disable for now
+  ]
+
+  if (!props.isAnimation) {
+    modes.push('lineart')
+  }
+
+  return modes
+})
+
+watch(
+  () => props.upDirection,
+  (newValue) => {
+    if (newValue) {
+      upDirection.value = newValue
+    }
+  }
+)
+
+watch(
+  () => props.materialMode,
+  (newValue) => {
+    if (newValue) {
+      materialMode.value = newValue
+    }
+  }
+)
+
+watch(
+  () => props.edgeThreshold,
+  (newValue) => {
+    edgeThreshold.value = newValue
+  }
+)
+
+const toggleUpDirection = () => {
+  showUpDirection.value = !showUpDirection.value
+  showMaterialMode.value = false
+  showEdgeThreshold.value = false
+}
+
+const selectUpDirection = (direction: UpDirection) => {
+  upDirection.value = direction
+  emit('updateUpDirection', direction)
+  showUpDirection.value = false
+}
+
+const formatOption = (option: string) => {
+  if (option === 'original') return 'Original'
+  return option.toUpperCase()
+}
+
+const toggleMaterialMode = () => {
+  showMaterialMode.value = !showMaterialMode.value
+  showUpDirection.value = false
+  showEdgeThreshold.value = false
+}
+
+const selectMaterialMode = (mode: MaterialMode) => {
+  materialMode.value = mode
+  emit('updateMaterialMode', mode)
+  showMaterialMode.value = false
+}
+
+const formatMaterialMode = (mode: MaterialMode) => {
+  return mode.charAt(0).toUpperCase() + mode.slice(1)
+}
+
+const toggleEdgeThreshold = () => {
+  showEdgeThreshold.value = !showEdgeThreshold.value
+  showUpDirection.value = false
+  showMaterialMode.value = false
+}
+
+const updateEdgeThreshold = () => {
+  emit('updateEdgeThreshold', edgeThreshold.value)
+}
+
+const closeSceneSlider = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+
+  if (!target.closest('.show-up-direction')) {
+    showUpDirection.value = false
+  }
+
+  if (!target.closest('.show-material-mode')) {
+    showMaterialMode.value = false
+  }
+
+  if (!target.closest('.show-edge-threshold')) {
+    showEdgeThreshold.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeSceneSlider)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeSceneSlider)
+})
+</script>

src/components/load3d/controls/SceneControls.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="flex flex-col">
+    <Button
+      class="p-button-rounded p-button-text"
+      :class="{ 'p-button-outlined': showGrid }"
+      @click="toggleGrid"
+    >
+      <i
+        class="pi pi-table text-white text-lg"
+        v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
+      ></i>
+    </Button>
+
+    <div v-if="!hasBackgroundImage">
+      <Button class="p-button-rounded p-button-text" @click="openColorPicker">
+        <i
+          class="pi pi-palette text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.backgroundColor'),
+            showDelay: 300
+          }"
+        ></i>
+        <input
+          type="color"
+          ref="colorPickerRef"
+          :value="backgroundColor"
+          @input="
+            updateBackgroundColor(($event.target as HTMLInputElement).value)
+          "
+          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
+        />
+      </Button>
+    </div>
+
+    <div v-if="!hasBackgroundImage">
+      <Button class="p-button-rounded p-button-text" @click="openImagePicker">
+        <i
+          class="pi pi-image text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.uploadBackgroundImage'),
+            showDelay: 300
+          }"
+        ></i>
+        <input
+          type="file"
+          ref="imagePickerRef"
+          accept="image/*"
+          @change="uploadBackgroundImage"
+          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
+        />
+      </Button>
+    </div>
+
+    <div v-if="hasBackgroundImage">
+      <Button
+        class="p-button-rounded p-button-text"
+        @click="removeBackgroundImage"
+      >
+        <i
+          class="pi pi-times text-white text-lg"
+          v-tooltip.right="{
+            value: t('load3d.removeBackgroundImage'),
+            showDelay: 300
+          }"
+        ></i>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Tooltip } from 'primevue'
+import Button from 'primevue/button'
+import { ref, watch } from 'vue'
+
+import { t } from '@/i18n'
+
+const vTooltip = Tooltip
+
+const props = defineProps<{
+  backgroundColor: string
+  showGrid: boolean
+  hasBackgroundImage?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggleGrid', value: boolean): void
+  (e: 'updateBackgroundColor', color: string): void
+  (e: 'updateBackgroundImage', file: File | null): void
+}>()
+
+const backgroundColor = ref(props.backgroundColor)
+const showGrid = ref(props.showGrid)
+const hasBackgroundImage = ref(props.hasBackgroundImage)
+const colorPickerRef = ref<HTMLInputElement | null>(null)
+const imagePickerRef = ref<HTMLInputElement | null>(null)
+
+watch(
+  () => props.backgroundColor,
+  (newValue) => {
+    backgroundColor.value = newValue
+  }
+)
+
+watch(
+  () => props.showGrid,
+  (newValue) => {
+    showGrid.value = newValue
+  }
+)
+
+watch(
+  () => props.hasBackgroundImage,
+  (newValue) => {
+    hasBackgroundImage.value = newValue
+  }
+)
+
+const toggleGrid = () => {
+  showGrid.value = !showGrid.value
+  emit('toggleGrid', showGrid.value)
+}
+
+const updateBackgroundColor = (color: string) => {
+  emit('updateBackgroundColor', color)
+}
+
+const openColorPicker = () => {
+  colorPickerRef.value?.click()
+}
+
+const openImagePicker = () => {
+  imagePickerRef.value?.click()
+}
+
+const uploadBackgroundImage = (event: Event) => {
+  const input = event.target as HTMLInputElement
+
+  if (input.files && input.files[0]) {
+    emit('updateBackgroundImage', input.files[0])
+  }
+}
+
+const removeBackgroundImage = () => {
+  emit('updateBackgroundImage', null)
+}
+</script>