[3d] redesign UI (#2686)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Chenlei Hu <huchenlei@proton.me>

src/components/load3d/Load3D.vue

@@ -10,6 +10,8 @@
       :cameraType="cameraType"
       :showPreview="showPreview"
       :backgroundImage="backgroundImage"
+      :upDirection="upDirection"
+      :materialMode="materialMode"
       @materialModeChange="listenMaterialModeChange"
       @backgroundColorChange="listenBackgroundColorChange"
       @lightIntensityChange="listenLightIntensityChange"
@@ -18,6 +20,7 @@
       @showGridChange="listenShowGridChange"
       @showPreviewChange="listenShowPreviewChange"
       @backgroundImageChange="listenBackgroundImageChange"
+      @upDirectionChange="listenUpDirectionChange"
     />
     <Load3DControls
       :backgroundColor="backgroundColor"
@@ -30,6 +33,8 @@
       :showPreviewButton="showPreviewButton"
       :cameraType="cameraType"
       :hasBackgroundImage="hasBackgroundImage"
+      :upDirection="upDirection"
+      :materialMode="materialMode"
       @updateBackgroundImage="handleBackgroundImageUpdate"
       @switchCamera="switchCamera"
       @toggleGrid="toggleGrid"
@@ -37,6 +42,8 @@
       @updateLightIntensity="handleUpdateLightIntensity"
       @togglePreview="togglePreview"
       @updateFOV="handleUpdateFOV"
+      @updateUpDirection="handleUpdateUpDirection"
+      @updateMaterialMode="handleUpdateMaterialMode"
     />
   </div>
 </template>
@@ -47,6 +54,11 @@ 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'
+import {
+  CameraType,
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 
 const props = defineProps<{
   node: any
@@ -61,9 +73,11 @@ const lightIntensity = ref(5)
 const showLightIntensityButton = ref(true)
 const fov = ref(75)
 const showFOVButton = ref(true)
-const cameraType = ref<'perspective' | 'orthographic'>('perspective')
+const cameraType = ref<CameraType>('perspective')
 const hasBackgroundImage = ref(false)
 const backgroundImage = ref('')
+const upDirection = ref<UpDirection>('original')
+const materialMode = ref<MaterialMode>('original')
 
 const showPreviewButton = computed(() => {
   return !props.type.includes('Preview')
@@ -115,24 +129,34 @@ const handleUpdateFOV = (value: number) => {
   node.value.properties['FOV'] = fov.value
 }
 
-const materialMode = ref<'original' | 'normal' | 'wireframe' | 'depth'>(
-  'original'
-)
-
 const handleBackgroundColorChange = (value: string) => {
   backgroundColor.value = value
 
   node.value.properties['Background Color'] = value
 }
 
-const listenMaterialModeChange = (
-  mode: 'original' | 'normal' | 'wireframe' | 'depth'
-) => {
+const handleUpdateUpDirection = (value: UpDirection) => {
+  upDirection.value = value
+
+  node.value.properties['Up Direction'] = value
+}
+
+const handleUpdateMaterialMode = (value: MaterialMode) => {
+  materialMode.value = value
+
+  node.value.properties['Material Mode'] = value
+}
+
+const listenMaterialModeChange = (mode: MaterialMode) => {
   materialMode.value = mode
 
   showLightIntensityButton.value = mode === 'original'
 }
 
+const listenUpDirectionChange = (value: UpDirection) => {
+  upDirection.value = value
+}
+
 const listenBackgroundColorChange = (value: string) => {
   backgroundColor.value = value
 }
@@ -145,7 +169,7 @@ const listenFOVChange = (value: number) => {
   fov.value = value
 }
 
-const listenCameraTypeChange = (value: 'perspective' | 'orthographic') => {
+const listenCameraTypeChange = (value: CameraType) => {
   cameraType.value = value
   showFOVButton.value = cameraType.value === 'perspective'
 }

src/components/load3d/Load3DAnimation.vue

@@ -9,13 +9,14 @@
       :fov="fov"
       :cameraType="cameraType"
       :showPreview="showPreview"
-      :materialMode="materialMode"
       :showFOVButton="showFOVButton"
       :showLightIntensityButton="showLightIntensityButton"
       :playing="playing"
       :selectedSpeed="selectedSpeed"
       :selectedAnimation="selectedAnimation"
       :backgroundImage="backgroundImage"
+      :upDirection="upDirection"
+      :materialMode="materialMode"
       @materialModeChange="listenMaterialModeChange"
       @backgroundColorChange="listenBackgroundColorChange"
       @lightIntensityChange="listenLightIntensityChange"
@@ -25,6 +26,7 @@
       @showPreviewChange="listenShowPreviewChange"
       @backgroundImageChange="listenBackgroundImageChange"
       @animationListChange="animationListChange"
+      @upDirectionChange="listenUpDirectionChange"
     />
     <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
       <Load3DControls
@@ -38,6 +40,8 @@
         :showPreviewButton="showPreviewButton"
         :cameraType="cameraType"
         :hasBackgroundImage="hasBackgroundImage"
+        :upDirection="upDirection"
+        :materialMode="materialMode"
         @updateBackgroundImage="handleBackgroundImageUpdate"
         @switchCamera="switchCamera"
         @toggleGrid="toggleGrid"
@@ -45,6 +49,8 @@
         @updateLightIntensity="handleUpdateLightIntensity"
         @togglePreview="togglePreview"
         @updateFOV="handleUpdateFOV"
+        @updateUpDirection="handleUpdateUpDirection"
+        @updateMaterialMode="handleUpdateMaterialMode"
       />
       <Load3DAnimationControls
         :animations="animations"
@@ -64,7 +70,12 @@ import Load3DAnimationControls from '@/components/load3d/Load3DAnimationControls
 import Load3DAnimationScene from '@/components/load3d/Load3DAnimationScene.vue'
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import { AnimationItem } from '@/extensions/core/load3d/interfaces'
+import {
+  AnimationItem,
+  CameraType,
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 
 const props = defineProps<{
   node: any
@@ -138,9 +149,20 @@ const handleUpdateFOV = (value: number) => {
   node.value.properties['FOV'] = fov.value
 }
 
-const materialMode = ref<'original' | 'normal' | 'wireframe' | 'depth'>(
-  'original'
-)
+const materialMode = ref<MaterialMode>('original')
+const upDirection = ref<UpDirection>('original')
+
+const handleUpdateUpDirection = (value: UpDirection) => {
+  upDirection.value = value
+
+  node.value.properties['Up Direction'] = value
+}
+
+const handleUpdateMaterialMode = (value: MaterialMode) => {
+  materialMode.value = value
+
+  node.value.properties['Material Mode'] = value
+}
 
 const handleBackgroundColorChange = (value: string) => {
   backgroundColor.value = value
@@ -164,14 +186,16 @@ const animationListChange = (value: any) => {
   animations.value = value
 }
 
-const listenMaterialModeChange = (
-  mode: 'original' | 'normal' | 'wireframe' | 'depth'
-) => {
+const listenMaterialModeChange = (mode: MaterialMode) => {
   materialMode.value = mode
 
   showLightIntensityButton.value = mode === 'original'
 }
 
+const listenUpDirectionChange = (value: UpDirection) => {
+  upDirection.value = value
+}
+
 const listenBackgroundColorChange = (value: string) => {
   backgroundColor.value = value
 }
@@ -184,7 +208,7 @@ const listenFOVChange = (value: number) => {
   fov.value = value
 }
 
-const listenCameraTypeChange = (value: 'perspective' | 'orthographic') => {
+const listenCameraTypeChange = (value: CameraType) => {
   cameraType.value = value
 
   showFOVButton.value = cameraType.value === 'perspective'

src/components/load3d/Load3DAnimationScene.vue

@@ -10,6 +10,8 @@
     :showPreview="showPreview"
     :extraListeners="animationListeners"
     :backgroundImage="backgroundImage"
+    :upDirection="upDirection"
+    :materialMode="materialMode"
     @materialModeChange="listenMaterialModeChange"
     @backgroundColorChange="listenBackgroundColorChange"
     @lightIntensityChange="listenLightIntensityChange"
@@ -24,6 +26,11 @@
 import { ref, watch } from 'vue'
 
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
+import {
+  CameraType,
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 
 const props = defineProps<{
   node: any
@@ -32,9 +39,10 @@ const props = defineProps<{
   showGrid: boolean
   lightIntensity: number
   fov: number
-  cameraType: 'perspective' | 'orthographic'
+  cameraType: CameraType
   showPreview: boolean
-  materialMode: 'original' | 'normal' | 'wireframe' | 'depth'
+  materialMode: MaterialMode
+  upDirection: UpDirection
   showFOVButton: boolean
   showLightIntensityButton: boolean
   playing: boolean
@@ -50,6 +58,7 @@ const fov = ref(props.fov)
 const lightIntensity = ref(props.lightIntensity)
 const cameraType = ref(props.cameraType)
 const showGrid = ref(props.showGrid)
+const upDirection = ref(props.upDirection)
 const materialMode = ref(props.materialMode)
 const showFOVButton = ref(props.showFOVButton)
 const showLightIntensityButton = ref(props.showLightIntensityButton)
@@ -90,6 +99,20 @@ watch(
   }
 )
 
+watch(
+  () => props.upDirection,
+  (newValue) => {
+    upDirection.value = newValue
+  }
+)
+
+watch(
+  () => props.materialMode,
+  (newValue) => {
+    materialMode.value = newValue
+  }
+)
+
 watch(
   () => props.showPreview,
   (newValue) => {
@@ -122,9 +145,7 @@ const emit = defineEmits<{
   (e: 'animationListChange', animationList: string): void
 }>()
 
-const listenMaterialModeChange = (
-  mode: 'original' | 'normal' | 'wireframe' | 'depth'
-) => {
+const listenMaterialModeChange = (mode: MaterialMode) => {
   materialMode.value = mode
 
   showLightIntensityButton.value = mode === 'original'
@@ -142,7 +163,7 @@ const listenFOVChange = (value: number) => {
   fov.value = value
 }
 
-const listenCameraTypeChange = (value: 'perspective' | 'orthographic') => {
+const listenCameraTypeChange = (value: CameraType) => {
   cameraType.value = value
 
   showFOVButton.value = cameraType.value === 'perspective'

src/components/load3d/Load3DControls.vue

@@ -1,132 +1,240 @@
 <template>
   <div
-    class="absolute top-2 left-2 flex flex-col pointer-events-auto z-20 bg-gray-700 bg-opacity-30 rounded-lg"
+    class="absolute top-12 left-2 flex flex-col pointer-events-auto z-20 bg-gray-700 bg-opacity-30 rounded-lg"
   >
-    <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>
-
-    <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">
+    <div class="relative show-menu">
       <Button
-        class="p-button-rounded p-button-text"
-        @click="removeBackgroundImage"
+        class="p-button-rounded p-button-text bg-opacity-30"
+        @click="toggleMenu"
       >
-        <i
-          class="pi pi-times text-white text-lg"
-          v-tooltip.right="{
-            value: t('load3d.removeBackgroundImage'),
-            showDelay: 300
-          }"
-        ></i>
+        <i class="pi pi-bars text-white text-lg"></i>
       </Button>
-    </div>
 
-    <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"
+        v-show="isMenuOpen"
+        class="absolute left-12 top-0 bg-black bg-opacity-50 rounded-lg shadow-lg"
       >
-        <Slider
-          v-model="lightIntensity"
-          class="w-full"
-          @change="updateLightIntensity"
-          :min="1"
-          :max="20"
-          :step="1"
-        />
+        <div class="flex flex-col">
+          <Button
+            v-for="(label, category) in categories"
+            :key="category"
+            class="p-button-text w-full flex items-center justify-start"
+            :class="{ 'bg-gray-600': activeCategory === category }"
+            @click="selectCategory(category)"
+          >
+            <i :class="getCategoryIcon(category)"></i>
+            <span class="text-white">{{ label }}</span>
+          </Button>
+        </div>
       </div>
     </div>
 
-    <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 v-show="activeCategory" class="bg-gray-700 bg-opacity-30 rounded-lg">
+      <div v-if="activeCategory === 'scene'" 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>
+
+      <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>
+      <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">
         <i
@@ -148,6 +256,11 @@ import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
+import {
+  CameraType,
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
 const vTooltip = Tooltip
@@ -161,10 +274,40 @@ const props = defineProps<{
   fov: number
   showFOVButton: boolean
   showPreviewButton: boolean
-  cameraType: 'perspective' | 'orthographic'
+  cameraType: CameraType
   hasBackgroundImage?: boolean
+  upDirection: UpDirection
+  materialMode: MaterialMode
 }>()
 
+const isMenuOpen = ref(false)
+const activeCategory = ref<'scene' | 'model' | 'camera' | 'light'>('scene')
+const categories = {
+  scene: 'scene',
+  model: 'model',
+  camera: 'camera',
+  light: 'light'
+}
+
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value
+}
+
+const selectCategory = (category: 'scene' | 'model' | 'camera' | 'light') => {
+  activeCategory.value = category
+  isMenuOpen.value = false
+}
+
+const getCategoryIcon = (category: string) => {
+  const icons = {
+    scene: 'pi pi-image',
+    model: 'pi pi-box',
+    camera: 'pi pi-camera',
+    light: 'pi pi-sun'
+  }
+  return `${icons[category]} text-white text-lg`
+}
+
 const emit = defineEmits<{
   (e: 'switchCamera'): void
   (e: 'toggleGrid', value: boolean): void
@@ -173,6 +316,8 @@ const emit = defineEmits<{
   (e: 'updateFOV', value: number): void
   (e: 'togglePreview', value: boolean): void
   (e: 'updateBackgroundImage', file: File | null): void
+  (e: 'updateUpDirection', direction: UpDirection): void
+  (e: 'updateMaterialMode', mode: MaterialMode): void
 }>()
 
 const backgroundColor = ref(props.backgroundColor)
@@ -180,6 +325,8 @@ const showGrid = ref(props.showGrid)
 const showPreview = ref(props.showPreview)
 const colorPickerRef = ref<HTMLInputElement | null>(null)
 const lightIntensity = ref(props.lightIntensity)
+const upDirection = ref(props.upDirection || 'original')
+const materialMode = ref(props.materialMode || 'original')
 const showLightIntensity = ref(false)
 const showLightIntensityButton = ref(props.showLightIntensityButton)
 const fov = ref(props.fov)
@@ -188,6 +335,23 @@ 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',
+  '+x',
+  '-y',
+  '+y',
+  '-z',
+  '+z'
+]
+const showMaterialMode = ref(false)
+const materialModes: MaterialMode[] = [
+  'original',
+  'normal',
+  'wireframe',
+  'depth'
+]
 
 const switchCamera = () => {
   emit('switchCamera')
@@ -227,9 +391,40 @@ const updateFOV = () => {
   emit('updateFOV', fov.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
   }
@@ -237,12 +432,29 @@ const closeSlider = (e: MouseEvent) => {
   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
+  }
 }
 
 const openImagePicker = () => {
   imagePickerRef.value?.click()
 }
 
+watch(
+  () => props.upDirection,
+  (newValue) => {
+    if (newValue) {
+      upDirection.value = newValue
+    }
+  }
+)
+
 const uploadBackgroundImage = (event: Event) => {
   const input = event.target as HTMLInputElement
 
@@ -294,6 +506,20 @@ watch(
   }
 )
 
+watch(
+  () => props.upDirection,
+  (newValue) => {
+    upDirection.value = newValue
+  }
+)
+
+watch(
+  () => props.materialMode,
+  (newValue) => {
+    materialMode.value = newValue
+  }
+)
+
 watch(
   () => props.showPreviewButton,
   (newValue) => {
@@ -315,6 +541,15 @@ watch(
   }
 )
 
+watch(
+  () => props.materialMode,
+  (newValue) => {
+    if (newValue) {
+      materialMode.value = newValue
+    }
+  }
+)
+
 onMounted(() => {
   document.addEventListener('click', closeSlider)
 })

src/components/load3d/Load3DScene.vue

@@ -11,6 +11,11 @@ import { onMounted, onUnmounted, ref, toRaw, watchEffect } from 'vue'
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import {
+  CameraType,
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 import { useLoad3dService } from '@/services/load3dService'
 
 const props = defineProps<{
@@ -20,9 +25,11 @@ const props = defineProps<{
   showGrid: boolean
   lightIntensity: number
   fov: number
-  cameraType: 'perspective' | 'orthographic'
+  cameraType: CameraType
   showPreview: boolean
   backgroundImage: string
+  upDirection: UpDirection
+  materialMode: MaterialMode
   extraListeners?: Record<string, (value: any) => void>
 }>()
 
@@ -42,6 +49,7 @@ const eventConfig = {
   showPreviewChange: (value: boolean) => emit('showPreviewChange', value),
   backgroundImageChange: (value: string) =>
     emit('backgroundImageChange', value),
+  upDirectionChange: (value: string) => emit('upDirectionChange', value),
   modelLoadingStart: () => loadingOverlayRef.value?.startLoading(),
   modelLoadingEnd: () => loadingOverlayRef.value?.endLoading()
 } as const
@@ -57,6 +65,8 @@ watchEffect(() => {
     rawLoad3d.toggleCamera(props.cameraType)
     rawLoad3d.togglePreview(props.showPreview)
     rawLoad3d.setBackgroundImage(props.backgroundImage)
+    rawLoad3d.setUpDirection(props.upDirection)
+    rawLoad3d.setMaterialMode(props.materialMode)
   }
 })
 
@@ -69,6 +79,7 @@ const emit = defineEmits<{
   (e: 'showGridChange', showGrid: boolean): void
   (e: 'showPreviewChange', showPreview: boolean): void
   (e: 'backgroundImageChange', backgroundImage: string): void
+  (e: 'upDirectionChange', upDirection: string): void
 }>()
 
 const handleEvents = (action: 'add' | 'remove') => {