[3d] apply new vue desige (#3018)

src/components/load3d/Load3DAnimation.vue

@@ -74,16 +74,22 @@ import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import {
   AnimationItem,
   CameraType,
+  Load3DAnimationNodeType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComponentWidget } from '@/scripts/domWidget'
 
-const props = defineProps<{
-  node: any
-  type: 'Load3DAnimation' | 'Preview3DAnimation'
+const { widget } = defineProps<{
+  widget: ComponentWidget<string[]>
 }>()
 
-const node = ref(props.node)
+const inputSpec = widget.inputSpec as CustomInputSpec
+
+const node = widget.node
+const type = inputSpec.type as Load3DAnimationNodeType
+
 const backgroundColor = ref('#000000')
 const showGrid = ref(true)
 const showPreview = ref(false)
@@ -101,7 +107,7 @@ const selectedAnimation = ref(0)
 const backgroundImage = ref('')
 
 const showPreviewButton = computed(() => {
-  return !props.type.includes('Preview')
+  return !type.includes('Preview')
 })
 
 const switchCamera = () => {
@@ -110,44 +116,44 @@ const switchCamera = () => {
 
   showFOVButton.value = cameraType.value === 'perspective'
 
-  node.value.properties['Camera Type'] = cameraType.value
+  node.properties['Camera Type'] = cameraType.value
 }
 
 const togglePreview = (value: boolean) => {
   showPreview.value = value
 
-  node.value.properties['Show Preview'] = showPreview.value
+  node.properties['Show Preview'] = showPreview.value
 }
 
 const toggleGrid = (value: boolean) => {
   showGrid.value = value
 
-  node.value.properties['Show Grid'] = showGrid.value
+  node.properties['Show Grid'] = showGrid.value
 }
 
 const handleUpdateLightIntensity = (value: number) => {
   lightIntensity.value = value
 
-  node.value.properties['Light Intensity'] = lightIntensity.value
+  node.properties['Light Intensity'] = lightIntensity.value
 }
 
 const handleBackgroundImageUpdate = async (file: File | null) => {
   if (!file) {
     hasBackgroundImage.value = false
     backgroundImage.value = ''
-    node.value.properties['Background Image'] = ''
+    node.properties['Background Image'] = ''
     return
   }
 
   backgroundImage.value = await Load3dUtils.uploadFile(file)
 
-  node.value.properties['Background Image'] = backgroundImage.value
+  node.properties['Background Image'] = backgroundImage.value
 }
 
 const handleUpdateFOV = (value: number) => {
   fov.value = value
 
-  node.value.properties['FOV'] = fov.value
+  node.properties['FOV'] = fov.value
 }
 
 const materialMode = ref<MaterialMode>('original')
@@ -156,19 +162,19 @@ const upDirection = ref<UpDirection>('original')
 const handleUpdateUpDirection = (value: UpDirection) => {
   upDirection.value = value
 
-  node.value.properties['Up Direction'] = value
+  node.properties['Up Direction'] = value
 }
 
 const handleUpdateMaterialMode = (value: MaterialMode) => {
   materialMode.value = value
 
-  node.value.properties['Material Mode'] = value
+  node.properties['Material Mode'] = value
 }
 
 const handleBackgroundColorChange = (value: string) => {
   backgroundColor.value = value
 
-  node.value.properties['Background Color'] = value
+  node.properties['Background Color'] = value
 }
 
 const togglePlay = (value: boolean) => {