[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 = (
+const handleUpdateUpDirection = (value: UpDirection) => {
-  mode: 'original' | 'normal' | 'wireframe' | 'depth'
+  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'>(
+const materialMode = ref<MaterialMode>('original')
-  '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 = (
+const listenMaterialModeChange = (mode: MaterialMode) => {
-  mode: 'original' | 'normal' | 'wireframe' | 'depth'
-) => {
   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 = (
+const listenMaterialModeChange = (mode: MaterialMode) => {
-  mode: 'original' | 'normal' | 'wireframe' | 'depth'
-) => {
   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">
+    <div class="relative show-menu">
-      <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">
       <Button
-        class="p-button-rounded p-button-text"
+        class="p-button-rounded p-button-text bg-opacity-30"
-        @click="removeBackgroundImage"
+        @click="toggleMenu"
       >
-        <i
+        <i class="pi pi-bars text-white text-lg"></i>
-          class="pi pi-times text-white text-lg"
-          v-tooltip.right="{
-            value: t('load3d.removeBackgroundImage'),
-            showDelay: 300
-          }"
-        ></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"
+        v-show="isMenuOpen"
-        class="absolute left-12 top-0 bg-black bg-opacity-50 p-4 rounded-lg shadow-lg"
+        class="absolute left-12 top-0 bg-black bg-opacity-50 rounded-lg shadow-lg"
-        style="width: 150px"
       >
-        <Slider
+        <div class="flex flex-col">
-          v-model="lightIntensity"
+          <Button
-          class="w-full"
+            v-for="(label, category) in categories"
-          @change="updateLightIntensity"
+            :key="category"
-          :min="1"
+            class="p-button-text w-full flex items-center justify-start"
-          :max="20"
+            :class="{ 'bg-gray-600': activeCategory === category }"
-          :step="1"
+            @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">
+    <div v-show="activeCategory" class="bg-gray-700 bg-opacity-30 rounded-lg">
-      <Button class="p-button-rounded p-button-text" @click="toggleFOV">
+      <div v-if="activeCategory === 'scene'" class="flex flex-col">
-        <i
+        <Button
-          class="pi pi-expand text-white text-lg"
+          class="p-button-rounded p-button-text"
-          v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
+          :class="{ 'p-button-outlined': showGrid }"
-        ></i>
+          @click="toggleGrid"
-      </Button>
+        >
-      <div
+          <i
-        v-show="showFOV"
+            class="pi pi-table text-white text-lg"
-        class="absolute left-12 top-0 bg-black bg-opacity-50 p-4 rounded-lg shadow-lg"
+            v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
-        style="width: 150px"
+          ></i>
-      >
+        </Button>
-        <Slider
+
-          v-model="fov"
+        <div v-if="!hasBackgroundImage">
-          class="w-full"
+          <Button
-          @change="updateFOV"
+            class="p-button-rounded p-button-text"
-          :min="10"
+            @click="openColorPicker"
-          :max="150"
+          >
-          :step="1"
+            <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') => {

src/extensions/core/load3d.ts

@@ -138,12 +138,6 @@ app.registerExtension({
       (w: IWidget) => w.name === 'model_file'
     )
 
-    const material = node.widgets.find((w: IWidget) => w.name === 'material')
-
-    const upDirection = node.widgets.find(
-      (w: IWidget) => w.name === 'up_direction'
-    )
-
     let cameraState = node.properties['Camera Info']
 
     const config = new Load3DConfiguration(load3d)
@@ -151,15 +145,7 @@ app.registerExtension({
     const width = node.widgets.find((w: IWidget) => w.name === 'width')
     const height = node.widgets.find((w: IWidget) => w.name === 'height')
 
-    config.configure(
+    config.configure('input', modelWidget, cameraState, width, height)
-      'input',
-      modelWidget,
-      material,
-      upDirection,
-      cameraState,
-      width,
-      height
-    )
 
     sceneWidget.serializeValue = async () => {
       node.properties['Camera Info'] = load3d.getCameraState()
@@ -309,12 +295,6 @@ app.registerExtension({
       (w: IWidget) => w.name === 'model_file'
     )
 
-    const material = node.widgets.find((w: IWidget) => w.name === 'material')
-
-    const upDirection = node.widgets.find(
-      (w: IWidget) => w.name === 'up_direction'
-    )
-
     let cameraState = node.properties['Camera Info']
 
     const config = new Load3DConfiguration(load3d)
@@ -322,15 +302,7 @@ app.registerExtension({
     const width = node.widgets.find((w: IWidget) => w.name === 'width')
     const height = node.widgets.find((w: IWidget) => w.name === 'height')
 
-    config.configure(
+    config.configure('input', modelWidget, cameraState, width, height)
-      'input',
-      modelWidget,
-      material,
-      upDirection,
-      cameraState,
-      width,
-      height
-    )
 
     sceneWidget.serializeValue = async () => {
       node.properties['Camera Info'] = load3d.getCameraState()
@@ -435,12 +407,6 @@ app.registerExtension({
       (w: IWidget) => w.name === 'model_file'
     )
 
-    const material = node.widgets.find((w: IWidget) => w.name === 'material')
-
-    const upDirection = node.widgets.find(
-      (w: IWidget) => w.name === 'up_direction'
-    )
-
     const onExecuted = node.onExecuted
 
     node.onExecuted = function (message: any) {
@@ -460,7 +426,7 @@ app.registerExtension({
 
       const config = new Load3DConfiguration(load3d)
 
-      config.configure('output', modelWidget, material, upDirection)
+      config.configure('output', modelWidget)
     }
   }
 })
@@ -536,12 +502,6 @@ app.registerExtension({
       (w: IWidget) => w.name === 'model_file'
     )
 
-    const material = node.widgets.find((w: IWidget) => w.name === 'material')
-
-    const upDirection = node.widgets.find(
-      (w: IWidget) => w.name === 'up_direction'
-    )
-
     const onExecuted = node.onExecuted
 
     node.onExecuted = function (message: any) {
@@ -561,7 +521,7 @@ app.registerExtension({
 
       const config = new Load3DConfiguration(load3d)
 
-      config.configure('output', modelWidget, material, upDirection)
+      config.configure('output', modelWidget)
     }
   }
 })

src/extensions/core/load3d/Load3DConfiguration.ts

@@ -2,6 +2,7 @@ import type { IWidget } from '@comfyorg/litegraph'
 
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import { MaterialMode } from '@/extensions/core/load3d/interfaces'
 import { api } from '@/scripts/api'
 
 class Load3DConfiguration {
@@ -10,21 +11,11 @@ class Load3DConfiguration {
   configure(
     loadFolder: 'input' | 'output',
     modelWidget: IWidget,
-    material: IWidget,
-    upDirection: IWidget,
     cameraState?: any,
     width: IWidget | null = null,
-    height: IWidget | null = null,
+    height: IWidget | null = null
-    postModelUpdateFunc?: (load3d: Load3d) => void
   ) {
-    this.setupModelHandling(
+    this.setupModelHandling(modelWidget, loadFolder, cameraState)
-      modelWidget,
-      loadFolder,
-      cameraState,
-      postModelUpdateFunc
-    )
-    this.setupMaterial(material)
-    this.setupDirection(upDirection)
     this.setupTargetSize(width, height)
     this.setupDefaultProperties()
   }
@@ -46,13 +37,11 @@ class Load3DConfiguration {
   private setupModelHandling(
     modelWidget: IWidget,
     loadFolder: 'input' | 'output',
-    cameraState?: any,
+    cameraState?: any
-    postModelUpdateFunc?: (load3d: Load3d) => void
   ) {
     const onModelWidgetUpdate = this.createModelUpdateHandler(
       loadFolder,
-      cameraState,
+      cameraState
-      postModelUpdateFunc
     )
     if (modelWidget.value) {
       onModelWidgetUpdate(modelWidget.value)
@@ -60,26 +49,6 @@ class Load3DConfiguration {
     modelWidget.callback = onModelWidgetUpdate
   }
 
-  private setupMaterial(material: IWidget) {
-    material.callback = (value: 'original' | 'normal' | 'wireframe') => {
-      this.load3d.setMaterialMode(value)
-    }
-    this.load3d.setMaterialMode(
-      material.value as 'original' | 'normal' | 'wireframe'
-    )
-  }
-
-  private setupDirection(upDirection: IWidget) {
-    upDirection.callback = (
-      value: 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
-    ) => {
-      this.load3d.setUpDirection(value)
-    }
-    this.load3d.setUpDirection(
-      upDirection.value as 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
-    )
-  }
-
   private setupDefaultProperties() {
     const cameraType = this.load3d.loadNodeProperty(
       'Camera Type',
@@ -114,8 +83,7 @@ class Load3DConfiguration {
 
   private createModelUpdateHandler(
     loadFolder: 'input' | 'output',
-    cameraState?: any,
+    cameraState?: any
-    postModelUpdateFunc?: (load3d: Load3d) => void
   ) {
     let isFirstLoad = true
     return async (value: string | number | boolean | object) => {
@@ -131,9 +99,19 @@ class Load3DConfiguration {
 
       await this.load3d.loadModel(modelUrl, filename)
 
-      if (postModelUpdateFunc) {
+      const upDirection = this.load3d.loadNodeProperty(
-        postModelUpdateFunc(this.load3d)
+        'Up Direction',
-      }
+        'original'
+      )
+
+      this.load3d.setUpDirection(upDirection)
+
+      const materialMode = this.load3d.loadNodeProperty(
+        'Material Mode',
+        'original'
+      )
+
+      this.load3d.setMaterialMode(materialMode)
 
       if (isFirstLoad && cameraState && typeof cameraState === 'object') {
         try {

src/extensions/core/load3d/Load3d.ts

@@ -254,6 +254,7 @@ class Load3d {
 
   setUpDirection(direction: UpDirection): void {
     this.modelManager.setUpDirection(direction)
+
     this.renderer.render(
       this.sceneManager.scene,
       this.cameraManager.activeCamera

src/locales/en/main.json

@@ -850,6 +850,8 @@
     "previewOutput": "Preview Output",
     "uploadBackgroundImage": "Upload Background Image",
     "removeBackgroundImage": "Remove Background Image",
-    "loadingModel": "Loading 3D Model..."
+    "loadingModel": "Loading 3D Model...",
+    "upDirection": "Up Direction",
+    "materialMode": "Material Mode"
   }
 }

src/locales/fr/main.json

@@ -324,10 +324,12 @@
     "fov": "FOV",
     "lightIntensity": "Intensité de la lumière",
     "loadingModel": "Chargement du modèle 3D...",
+    "materialMode": "Mode Matériel",
     "previewOutput": "Aperçu de la sortie",
     "removeBackgroundImage": "Supprimer l'image de fond",
     "showGrid": "Afficher la grille",
     "switchCamera": "Changer de caméra",
+    "upDirection": "Direction Haut",
     "uploadBackgroundImage": "Télécharger l'image de fond"
   },
   "maintenance": {

src/locales/ja/main.json

@@ -324,10 +324,12 @@
     "fov": "FOV",
     "lightIntensity": "光の強度",
     "loadingModel": "3Dモデルを読み込んでいます...",
+    "materialMode": "マテリアルモード",
     "previewOutput": "出力のプレビュー",
     "removeBackgroundImage": "背景画像を削除",
     "showGrid": "グリッドを表示",
     "switchCamera": "カメラを切り替える",
+    "upDirection": "上方向",
     "uploadBackgroundImage": "背景画像をアップロード"
   },
   "maintenance": {

src/locales/ko/main.json

@@ -324,10 +324,12 @@
     "fov": "FOV",
     "lightIntensity": "조명 강도",
     "loadingModel": "3D 모델 로딩 중...",
+    "materialMode": "재질 모드",
     "previewOutput": "출력 미리보기",
     "removeBackgroundImage": "배경 이미지 제거",
     "showGrid": "그리드 표시",
     "switchCamera": "카메라 전환",
+    "upDirection": "위 방향",
     "uploadBackgroundImage": "배경 이미지 업로드"
   },
   "maintenance": {

src/locales/ru/main.json

@@ -324,10 +324,12 @@
     "fov": "Угол обзора",
     "lightIntensity": "Интенсивность света",
     "loadingModel": "Загрузка 3D модели...",
+    "materialMode": "Режим Материала",
     "previewOutput": "Предварительный просмотр",
     "removeBackgroundImage": "Удалить фоновое изображение",
     "showGrid": "Показать сетку",
     "switchCamera": "Переключить камеру",
+    "upDirection": "Направление Вверх",
     "uploadBackgroundImage": "Загрузить фоновое изображение"
   },
   "maintenance": {

src/locales/zh/main.json

@@ -324,10 +324,12 @@
     "fov": "视场",
     "lightIntensity": "光照强度",
     "loadingModel": "正在加载3D模型...",
+    "materialMode": "材料模式",
     "previewOutput": "预览输出",
     "removeBackgroundImage": "移除背景图片",
     "showGrid": "显示网格",
     "switchCamera": "切换摄像头",
+    "upDirection": "向上方向",
     "uploadBackgroundImage": "上传背景图片"
   },
   "maintenance": {