[3d] remove unnecessary uploadTexture (#4357)

Author: jtydhr88

src/components/load3d/Load3D.vue

@@ -55,7 +55,6 @@
       @update-up-direction="handleUpdateUpDirection"
       @update-material-mode="handleUpdateMaterialMode"
       @update-edge-threshold="handleUpdateEdgeThreshold"
-      @upload-texture="handleUploadTexture"
       @export-model="handleExportModel"
     />
     <div
@@ -215,30 +214,6 @@ const handleBackgroundImageUpdate = async (file: File | null) => {
   node.properties['Background Image'] = backgroundImage.value
 }
 
-const handleUploadTexture = async (file: File) => {
-  if (!load3DSceneRef.value?.load3d) {
-    useToastStore().addAlert(t('toastMessages.no3dScene'))
-    return
-  }
-
-  try {
-    const resourceFolder = (node.properties['Resource Folder'] as string) || ''
-
-    const subfolder = resourceFolder.trim()
-      ? `3d/${resourceFolder.trim()}`
-      : '3d'
-
-    const texturePath = await Load3dUtils.uploadFile(file, subfolder)
-
-    await load3DSceneRef.value.load3d.applyTexture(texturePath)
-
-    node.properties['Texture'] = texturePath
-  } catch (error) {
-    console.error('Error applying texture:', error)
-    useToastStore().addAlert(t('toastMessages.failedToApplyTexture'))
-  }
-}
-
 const handleUpdateFOV = (value: number) => {
   fov.value = value
 

src/components/load3d/Load3DControls.vue

@@ -51,7 +51,6 @@
         @update-up-direction="handleUpdateUpDirection"
         @update-material-mode="handleUpdateMaterialMode"
         @update-edge-threshold="handleUpdateEdgeThreshold"
-        @upload-texture="handleUploadTexture"
       />
 
       <CameraControls
@@ -183,7 +182,6 @@ const emit = defineEmits<{
   (e: 'updateMaterialMode', mode: MaterialMode): void
   (e: 'updateEdgeThreshold', value: number): void
   (e: 'exportModel', format: string): void
-  (e: 'uploadTexture', file: File): void
 }>()
 
 const backgroundColor = ref(props.backgroundColor)
@@ -232,10 +230,6 @@ const handleUpdateEdgeThreshold = (value: number) => {
   emit('updateEdgeThreshold', value)
 }
 
-const handleUploadTexture = (file: File) => {
-  emit('uploadTexture', file)
-}
-
 const handleUpdateLightIntensity = (value: number) => {
   emit('updateLightIntensity', value)
 }

src/components/load3d/Load3DScene.vue

@@ -69,9 +69,6 @@ const eventConfig = {
   exportLoadingEnd: () => {
     loadingOverlayRef.value?.endLoading()
   },
-  textureLoadingStart: () =>
-    loadingOverlayRef.value?.startLoading(t('load3d.applyingTexture')),
-  textureLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
   recordingStatusChange: (value: boolean) =>
     emit('recordingStatusChange', value)
 } as const

src/components/load3d/controls/ModelControls.vue

@@ -59,32 +59,6 @@
       </div>
     </div>
 
-    <div
-      v-if="
-        materialMode === 'original' &&
-        !props.inputSpec.isAnimation &&
-        !props.inputSpec.isPreview
-      "
-      class="relative show-texture-upload"
-    >
-      <Button class="p-button-rounded p-button-text" @click="openTextureUpload">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.uploadTexture'),
-            showDelay: 300
-          }"
-          class="pi pi-image text-white text-lg"
-        />
-        <input
-          ref="texturePickerRef"
-          type="file"
-          accept="image/*"
-          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
-          @change="uploadTexture"
-        />
-      </Button>
-    </div>
-
     <div v-if="materialMode === 'lineart'" class="relative show-edge-threshold">
       <Button
         class="p-button-rounded p-button-text"
@@ -142,7 +116,6 @@ const emit = defineEmits<{
   (e: 'updateUpDirection', direction: UpDirection): void
   (e: 'updateMaterialMode', mode: MaterialMode): void
   (e: 'updateEdgeThreshold', value: number): void
-  (e: 'uploadTexture', file: File): void
 }>()
 
 const upDirection = ref(props.upDirection || 'original')
@@ -151,7 +124,6 @@ const edgeThreshold = ref(props.edgeThreshold || 85)
 const showUpDirection = ref(false)
 const showMaterialMode = ref(false)
 const showEdgeThreshold = ref(false)
-const texturePickerRef = ref<HTMLInputElement | null>(null)
 
 const upDirections: UpDirection[] = [
   'original',
@@ -247,18 +219,6 @@ const updateEdgeThreshold = () => {
   emit('updateEdgeThreshold', edgeThreshold.value)
 }
 
-const openTextureUpload = () => {
-  texturePickerRef.value?.click()
-}
-
-const uploadTexture = (event: Event) => {
-  const input = event.target as HTMLInputElement
-
-  if (input.files && input.files[0]) {
-    emit('uploadTexture', input.files[0])
-  }
-}
-
 const closeSceneSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 

src/extensions/core/load3d.ts

@@ -21,8 +21,6 @@ async function handleModelUpload(files: FileList, node: any) {
     (w: any) => w.name === 'model_file'
   ) as IStringWidget
 
-  node.properties['Texture'] = undefined
-
   try {
     const resourceFolder = (node.properties['Resource Folder'] as string) || ''
 
@@ -215,8 +213,6 @@ useExtensionService().registerExtension({
           const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
           if (modelWidget) {
             modelWidget.value = ''
-
-            node.properties['Texture'] = undefined
           }
         })
 

src/extensions/core/load3d/Load3DConfiguration.ts

@@ -160,12 +160,6 @@ class Load3DConfiguration {
 
       this.load3d.setEdgeThreshold(edgeThreshold)
 
-      const texturePath = this.load3d.loadNodeProperty('Texture', null)
-
-      if (texturePath) {
-        await this.load3d.applyTexture(texturePath)
-      }
-
       if (isFirstLoad && cameraState && typeof cameraState === 'object') {
         try {
           this.load3d.setCameraState(cameraState)

src/extensions/core/load3d/Load3d.ts

@@ -293,23 +293,6 @@ class Load3d {
     }
   }
 
-  async applyTexture(texturePath: string): Promise<void> {
-    if (!this.modelManager.currentModel) {
-      throw new Error('No model to apply texture to')
-    }
-
-    this.eventManager.emitEvent('textureLoadingStart', null)
-
-    try {
-      await this.modelManager.applyTexture(texturePath)
-    } catch (error) {
-      console.error('Error applying texture:', error)
-      throw error
-    } finally {
-      this.eventManager.emitEvent('textureLoadingEnd', null)
-    }
-  }
-
   setBackgroundColor(color: string): void {
     this.sceneManager.setBackgroundColor(color)
 

src/extensions/core/load3d/ModelManager.ts

@@ -5,7 +5,6 @@ import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeome
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
 import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils'
 
-import Load3dUtils from './Load3dUtils'
 import { ColoredShadowMaterial } from './conditional-lines/ColoredShadowMaterial'
 import { ConditionalEdgesGeometry } from './conditional-lines/ConditionalEdgesGeometry'
 import { ConditionalEdgesShader } from './conditional-lines/ConditionalEdgesShader.js'
@@ -135,66 +134,6 @@ export class ModelManager implements ModelManagerInterface {
     })
   }
 
-  async applyTexture(texturePath: string): Promise<void> {
-    if (!this.currentModel) {
-      throw new Error('No model available to apply texture to')
-    }
-
-    if (this.appliedTexture) {
-      this.appliedTexture.dispose()
-    }
-
-    try {
-      let imageUrl = Load3dUtils.getResourceURL(
-        ...Load3dUtils.splitFilePath(texturePath)
-      )
-
-      if (!imageUrl.startsWith('/api')) {
-        imageUrl = '/api' + imageUrl
-      }
-
-      this.appliedTexture = await new Promise<THREE.Texture>(
-        (resolve, reject) => {
-          this.textureLoader.load(
-            imageUrl,
-            (texture) => {
-              texture.colorSpace = THREE.SRGBColorSpace
-              texture.wrapS = THREE.RepeatWrapping
-              texture.wrapT = THREE.RepeatWrapping
-              resolve(texture)
-            },
-            undefined,
-            (error) => reject(error)
-          )
-        }
-      )
-
-      if (this.materialMode === 'original') {
-        this.currentModel.traverse((child) => {
-          if (child instanceof THREE.Mesh) {
-            const material = new THREE.MeshStandardMaterial({
-              map: this.appliedTexture,
-              metalness: 0.1,
-              roughness: 0.8,
-              side: THREE.DoubleSide
-            })
-
-            if (!this.originalMaterials.has(child)) {
-              this.originalMaterials.set(child, child.material)
-            }
-
-            child.material = material
-          }
-        })
-      }
-
-      return Promise.resolve()
-    } catch (error) {
-      console.error('Error applying texture:', error)
-      return Promise.reject(error)
-    }
-  }
-
   disposeLineartModel(): void {
     this.disposeEdgesModel()
     this.disposeShadowModel()