[3d] add lineart mode (#2800)

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

src/components/load3d/Load3D.vue

@@ -35,6 +35,7 @@
       :hasBackgroundImage="hasBackgroundImage"
       :upDirection="upDirection"
       :materialMode="materialMode"
+      :isAnimation="false"
       @updateBackgroundImage="handleBackgroundImageUpdate"
       @switchCamera="switchCamera"
       @toggleGrid="toggleGrid"

src/components/load3d/Load3DAnimation.vue

@@ -42,6 +42,7 @@
         :hasBackgroundImage="hasBackgroundImage"
         :upDirection="upDirection"
         :materialMode="materialMode"
+        :isAnimation="true"
         @updateBackgroundImage="handleBackgroundImageUpdate"
         @switchCamera="switchCamera"
         @toggleGrid="toggleGrid"

src/components/load3d/Load3DControls.vue

@@ -105,7 +105,7 @@
       </div>
 
       <div v-if="activeCategory === 'model'" class="flex flex-col">
-        <div class="relative show-up-direction">
+        <div v-if="notMaterialLineart" class="relative show-up-direction">
           <Button
             class="p-button-rounded p-button-text"
             @click="toggleUpDirection"
@@ -278,6 +278,7 @@ const props = defineProps<{
   hasBackgroundImage?: boolean
   upDirection: UpDirection
   materialMode: MaterialMode
+  isAnimation: boolean
 }>()
 
 const isMenuOpen = ref(false)
@@ -346,12 +347,25 @@ const upDirections: UpDirection[] = [
   '+z'
 ]
 const showMaterialMode = ref(false)
-const materialModes: MaterialMode[] = [
-  'original',
-  'normal',
-  'wireframe'
-  //'depth' disable for now
-]
+
+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')

src/components/load3d/Load3DScene.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import { LGraphNode } from '@comfyorg/litegraph'
-import { onMounted, onUnmounted, ref, toRaw, watchEffect } from 'vue'
+import { onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue'
 
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
 import Load3d from '@/extensions/core/load3d/Load3d'
@@ -16,6 +16,7 @@ import {
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
 import { useLoad3dService } from '@/services/load3dService'
 
 const props = defineProps<{
@@ -50,8 +51,12 @@ const eventConfig = {
   backgroundImageChange: (value: string) =>
     emit('backgroundImageChange', value),
   upDirectionChange: (value: string) => emit('upDirectionChange', value),
-  modelLoadingStart: () => loadingOverlayRef.value?.startLoading(),
-  modelLoadingEnd: () => loadingOverlayRef.value?.endLoading()
+  modelLoadingStart: () =>
+    loadingOverlayRef.value?.startLoading(t('load3d.loadingModel')),
+  modelLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
+  materialLoadingStart: () =>
+    loadingOverlayRef.value?.startLoading(t('load3d.switchingMaterialMode')),
+  materialLoadingEnd: () => loadingOverlayRef.value?.endLoading()
 } as const
 
 watchEffect(() => {
@@ -66,10 +71,20 @@ watchEffect(() => {
     rawLoad3d.togglePreview(props.showPreview)
     rawLoad3d.setBackgroundImage(props.backgroundImage)
     rawLoad3d.setUpDirection(props.upDirection)
-    rawLoad3d.setMaterialMode(props.materialMode)
   }
 })
 
+watch(
+  () => props.materialMode,
+  (newValue) => {
+    if (load3d.value) {
+      const rawLoad3d = toRaw(load3d.value)
+
+      rawLoad3d.setMaterialMode(newValue)
+    }
+  }
+)
+
 const emit = defineEmits<{
   (e: 'materialModeChange', materialMode: string): void
   (e: 'backgroundColorChange', color: string): void

src/components/load3d/LoadingOverlay.vue

@@ -7,7 +7,7 @@
       <div class="flex flex-col items-center">
         <div class="spinner"></div>
         <div class="text-white mt-4 text-lg">
-          {{ t('load3d.loadingModel') }}
+          {{ loadingMessage }}
         </div>
       </div>
     </div>
@@ -20,9 +20,11 @@ import { ref } from 'vue'
 import { t } from '@/i18n'
 
 const modelLoading = ref(false)
+const loadingMessage = ref('')
 
-const startLoading = () => {
+const startLoading = (message?: string) => {
   modelLoading.value = true
+  loadingMessage.value = message || t('load3d.loadingModel')
 }
 
 const endLoading = () => {