From b2375a150cf43f7cfb3d06ac947e8f88f3bbeeef Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Sun, 16 Feb 2025 20:15:49 -0500
Subject: [PATCH] [3d] fully convert load 3d nodes into vue (#2590)

---
 src/components/load3d/Load3D.vue              | 140 +++++++++++++
 src/components/load3d/Load3DAnimation.vue     | 180 ++++++++++++++++
 .../load3d/Load3DAnimationControls.vue        | 151 +++-----------
 .../load3d/Load3DAnimationScene.vue           | 162 ++++++++++++++
 src/components/load3d/Load3DControls.vue      |  92 ++++++--
 src/components/load3d/Load3DScene.vue         |  96 +++++++++
 src/extensions/core/load3d.ts                 | 197 +++++++++---------
 .../core/load3d/Load3DConfiguration.ts        |   9 +-
 src/extensions/core/load3d/Load3d.ts          | 112 ++++------
 src/extensions/core/load3d/Load3dAnimation.ts |  73 ++-----
 src/services/load3dService.ts                 |  38 +++-
 11 files changed, 877 insertions(+), 373 deletions(-)
 create mode 100644 src/components/load3d/Load3D.vue
 create mode 100644 src/components/load3d/Load3DAnimation.vue
 create mode 100644 src/components/load3d/Load3DAnimationScene.vue
 create mode 100644 src/components/load3d/Load3DScene.vue

diff --git a/src/components/load3d/Load3D.vue b/src/components/load3d/Load3D.vue
new file mode 100644
index 000000000..b4161578c
--- /dev/null
+++ b/src/components/load3d/Load3D.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="relative w-full h-full">
+    <Load3DScene
+      :node="node"
+      :type="type"
+      :backgroundColor="backgroundColor"
+      :showGrid="showGrid"
+      :lightIntensity="lightIntensity"
+      :fov="fov"
+      :cameraType="cameraType"
+      :showPreview="showPreview"
+      @materialModeChange="listenMaterialModeChange"
+      @backgroundColorChange="listenBackgroundColorChange"
+      @lightIntensityChange="listenLightIntensityChange"
+      @fovChange="listenFOVChange"
+      @cameraTypeChange="listenCameraTypeChange"
+      @showGridChange="listenShowGridChange"
+      @showPreviewChange="listenShowPreviewChange"
+    />
+    <Load3DControls
+      :backgroundColor="backgroundColor"
+      :showGrid="showGrid"
+      :showPreview="showPreview"
+      :lightIntensity="lightIntensity"
+      :showLightIntensityButton="showLightIntensityButton"
+      :fov="fov"
+      :showFOVButton="showFOVButton"
+      :showPreviewButton="showPreviewButton"
+      :cameraType="cameraType"
+      @switchCamera="switchCamera"
+      @toggleGrid="toggleGrid"
+      @updateBackgroundColor="handleBackgroundColorChange"
+      @updateLightIntensity="handleUpdateLightIntensity"
+      @togglePreview="togglePreview"
+      @updateFOV="handleUpdateFOV"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import Load3DControls from '@/components/load3d/Load3DControls.vue'
+import Load3DScene from '@/components/load3d/Load3DScene.vue'
+
+const props = defineProps<{
+  node: any
+  type: 'Load3D' | 'Preview3D'
+}>()
+
+const node = ref(props.node)
+const backgroundColor = ref('#000000')
+const showGrid = ref(true)
+const showPreview = ref(false)
+const lightIntensity = ref(5)
+const showLightIntensityButton = ref(true)
+const fov = ref(75)
+const showFOVButton = ref(true)
+const cameraType = ref<'perspective' | 'orthographic'>('perspective')
+
+const showPreviewButton = computed(() => {
+  return !props.type.includes('Preview')
+})
+
+const switchCamera = () => {
+  cameraType.value =
+    cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
+
+  showFOVButton.value = cameraType.value === 'perspective'
+
+  node.value.properties['Camera Type'] = cameraType.value
+}
+
+const togglePreview = (value: boolean) => {
+  showPreview.value = value
+
+  node.value.properties['Show Preview'] = showPreview.value
+}
+
+const toggleGrid = (value: boolean) => {
+  showGrid.value = value
+
+  node.value.properties['Show Grid'] = showGrid.value
+}
+
+const handleUpdateLightIntensity = (value: number) => {
+  lightIntensity.value = value
+
+  node.value.properties['Light Intensity'] = lightIntensity.value
+}
+
+const handleUpdateFOV = (value: number) => {
+  fov.value = value
+
+  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'
+) => {
+  materialMode.value = mode
+
+  showLightIntensityButton.value = mode === 'original'
+}
+
+const listenBackgroundColorChange = (value: string) => {
+  backgroundColor.value = value
+}
+
+const listenLightIntensityChange = (value: number) => {
+  lightIntensity.value = value
+}
+
+const listenFOVChange = (value: number) => {
+  fov.value = value
+}
+
+const listenCameraTypeChange = (value: 'perspective' | 'orthographic') => {
+  cameraType.value = value
+  showFOVButton.value = cameraType.value === 'perspective'
+}
+
+const listenShowGridChange = (value: boolean) => {
+  showGrid.value = value
+}
+
+const listenShowPreviewChange = (value: boolean) => {
+  showPreview.value = value
+}
+</script>
diff --git a/src/components/load3d/Load3DAnimation.vue b/src/components/load3d/Load3DAnimation.vue
new file mode 100644
index 000000000..6fca8de2f
--- /dev/null
+++ b/src/components/load3d/Load3DAnimation.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="relative w-full h-full">
+    <Load3DAnimationScene
+      :node="node"
+      :type="type"
+      :backgroundColor="backgroundColor"
+      :showGrid="showGrid"
+      :lightIntensity="lightIntensity"
+      :fov="fov"
+      :cameraType="cameraType"
+      :showPreview="showPreview"
+      :materialMode="materialMode"
+      :showFOVButton="showFOVButton"
+      :showLightIntensityButton="showLightIntensityButton"
+      :playing="playing"
+      :selectedSpeed="selectedSpeed"
+      :selectedAnimation="selectedAnimation"
+      @materialModeChange="listenMaterialModeChange"
+      @backgroundColorChange="listenBackgroundColorChange"
+      @lightIntensityChange="listenLightIntensityChange"
+      @fovChange="listenFOVChange"
+      @cameraTypeChange="listenCameraTypeChange"
+      @showGridChange="listenShowGridChange"
+      @showPreviewChange="listenShowPreviewChange"
+      @animationListChange="animationListChange"
+    />
+    <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
+      <Load3DControls
+        :backgroundColor="backgroundColor"
+        :showGrid="showGrid"
+        :showPreview="showPreview"
+        :lightIntensity="lightIntensity"
+        :showLightIntensityButton="showLightIntensityButton"
+        :fov="fov"
+        :showFOVButton="showFOVButton"
+        :showPreviewButton="showPreviewButton"
+        :cameraType="cameraType"
+        @switchCamera="switchCamera"
+        @toggleGrid="toggleGrid"
+        @updateBackgroundColor="handleBackgroundColorChange"
+        @updateLightIntensity="handleUpdateLightIntensity"
+        @togglePreview="togglePreview"
+        @updateFOV="handleUpdateFOV"
+      />
+      <Load3DAnimationControls
+        :animations="animations"
+        :playing="playing"
+        @togglePlay="togglePlay"
+        @speedChange="speedChange"
+        @animationChange="animationChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import Load3DAnimationControls from '@/components/load3d/Load3DAnimationControls.vue'
+import Load3DAnimationScene from '@/components/load3d/Load3DAnimationScene.vue'
+import Load3DControls from '@/components/load3d/Load3DControls.vue'
+import type { AnimationItem } from '@/extensions/core/load3d/Load3dAnimation'
+
+const props = defineProps<{
+  node: any
+  type: 'Load3DAnimation' | 'Preview3DAnimation'
+}>()
+
+const node = ref(props.node)
+const backgroundColor = ref('#000000')
+const showGrid = ref(true)
+const showPreview = ref(false)
+const lightIntensity = ref(5)
+const showLightIntensityButton = ref(true)
+const fov = ref(75)
+const showFOVButton = ref(true)
+const cameraType = ref<'perspective' | 'orthographic'>('perspective')
+
+const animations = ref<AnimationItem[]>([])
+const playing = ref(false)
+const selectedSpeed = ref(1)
+const selectedAnimation = ref(0)
+
+const showPreviewButton = computed(() => {
+  return !props.type.includes('Preview')
+})
+
+const switchCamera = () => {
+  cameraType.value =
+    cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
+
+  showFOVButton.value = cameraType.value === 'perspective'
+
+  node.value.properties['Camera Type'] = cameraType.value
+}
+
+const togglePreview = (value: boolean) => {
+  showPreview.value = value
+
+  node.value.properties['Show Preview'] = showPreview.value
+}
+
+const toggleGrid = (value: boolean) => {
+  showGrid.value = value
+
+  node.value.properties['Show Grid'] = showGrid.value
+}
+
+const handleUpdateLightIntensity = (value: number) => {
+  lightIntensity.value = value
+
+  node.value.properties['Light Intensity'] = lightIntensity.value
+}
+
+const handleUpdateFOV = (value: number) => {
+  fov.value = value
+
+  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 togglePlay = (value: boolean) => {
+  playing.value = value
+}
+
+const speedChange = (value: number) => {
+  selectedSpeed.value = value
+}
+
+const animationChange = (value: number) => {
+  selectedAnimation.value = value
+}
+
+const animationListChange = (value: any) => {
+  animations.value = value
+}
+
+const listenMaterialModeChange = (
+  mode: 'original' | 'normal' | 'wireframe' | 'depth'
+) => {
+  materialMode.value = mode
+
+  showLightIntensityButton.value = mode === 'original'
+}
+
+const listenBackgroundColorChange = (value: string) => {
+  backgroundColor.value = value
+}
+
+const listenLightIntensityChange = (value: number) => {
+  lightIntensity.value = value
+}
+
+const listenFOVChange = (value: number) => {
+  fov.value = value
+}
+
+const listenCameraTypeChange = (value: 'perspective' | 'orthographic') => {
+  cameraType.value = value
+
+  showFOVButton.value = cameraType.value === 'perspective'
+}
+
+const listenShowGridChange = (value: boolean) => {
+  showGrid.value = value
+}
+
+const listenShowPreviewChange = (value: boolean) => {
+  showPreview.value = value
+}
+</script>
diff --git a/src/components/load3d/Load3DAnimationControls.vue b/src/components/load3d/Load3DAnimationControls.vue
index cda246c15..809068e62 100644
--- a/src/components/load3d/Load3DAnimationControls.vue
+++ b/src/components/load3d/Load3DAnimationControls.vue
@@ -1,55 +1,31 @@
 <template>
-  <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
-    <Load3DControls
-      :backgroundColor="backgroundColor"
-      :showGrid="showGrid"
-      :showPreview="showPreview"
-      :lightIntensity="lightIntensity"
-      :showLightIntensityButton="showLightIntensityButton"
-      :fov="fov"
-      :showFOVButton="showFOVButton"
-      :showPreviewButton="showPreviewButton"
-      @toggleCamera="onToggleCamera"
-      @toggleGrid="onToggleGrid"
-      @togglePreview="onTogglePreview"
-      @updateBackgroundColor="onUpdateBackgroundColor"
-      @updateLightIntensity="onUpdateLightIntensity"
-      @updateFOV="onUpdateFOV"
-      ref="load3dControlsRef"
+  <div
+    v-if="animations && animations.length > 0"
+    class="absolute top-0 left-0 w-full flex justify-center pt-2 gap-2 items-center pointer-events-auto z-10"
+  >
+    <Button class="p-button-rounded p-button-text" @click="togglePlay">
+      <i
+        :class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-white text-lg']"
+      ></i>
+    </Button>
+
+    <Select
+      v-model="selectedSpeed"
+      :options="speedOptions"
+      optionLabel="name"
+      optionValue="value"
+      @change="speedChange"
+      class="w-24"
     />
 
-    <div
-      v-if="animations && animations.length > 0"
-      class="absolute top-0 left-0 w-full flex justify-center pt-2 gap-2 items-center pointer-events-auto z-10"
-    >
-      <Button class="p-button-rounded p-button-text" @click="togglePlay">
-        <i
-          :class="[
-            'pi',
-            playing ? 'pi-pause' : 'pi-play',
-            'text-white text-lg'
-          ]"
-        ></i>
-      </Button>
-
-      <Select
-        v-model="selectedSpeed"
-        :options="speedOptions"
-        optionLabel="name"
-        optionValue="value"
-        @change="speedChange"
-        class="w-24"
-      />
-
-      <Select
-        v-model="selectedAnimation"
-        :options="animations"
-        optionLabel="name"
-        optionValue="index"
-        @change="animationChange"
-        class="w-32"
-      />
-    </div>
+    <Select
+      v-model="selectedAnimation"
+      :options="animations"
+      optionLabel="name"
+      optionValue="index"
+      @change="animationChange"
+      class="w-32"
+    />
   </div>
 </template>
 
@@ -58,46 +34,21 @@ import Button from 'primevue/button'
 import Select from 'primevue/select'
 import { ref, watch } from 'vue'
 
-import Load3DControls from '@/components/load3d/Load3DControls.vue'
-
 const props = defineProps<{
   animations: Array<{ name: string; index: number }>
   playing: boolean
-  backgroundColor: string
-  showGrid: boolean
-  showPreview: boolean
-  lightIntensity: number
-  showLightIntensityButton: boolean
-  fov: number
-  showFOVButton: boolean
-  showPreviewButton: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'toggleCamera'): void
-  (e: 'toggleGrid', value: boolean): void
-  (e: 'togglePreview', value: boolean): void
-  (e: 'updateBackgroundColor', color: string): void
   (e: 'togglePlay', value: boolean): void
   (e: 'speedChange', value: number): void
   (e: 'animationChange', value: number): void
-  (e: 'updateLightIntensity', value: number): void
-  (e: 'updateFOV', value: number): void
 }>()
 
 const animations = ref(props.animations)
 const playing = ref(props.playing)
 const selectedSpeed = ref(1)
 const selectedAnimation = ref(0)
-const backgroundColor = ref(props.backgroundColor)
-const showGrid = ref(props.showGrid)
-const showPreview = ref(props.showPreview)
-const lightIntensity = ref(props.lightIntensity)
-const showLightIntensityButton = ref(props.showLightIntensityButton)
-const fov = ref(props.fov)
-const showFOVButton = ref(props.showFOVButton)
-const showPreviewButton = ref(props.showPreviewButton)
-const load3dControlsRef = ref(null)
 
 const speedOptions = [
   { name: '0.1x', value: 0.1 },
@@ -107,42 +58,16 @@ const speedOptions = [
   { name: '2x', value: 2 }
 ]
 
-watch(backgroundColor, (newValue) => {
-  load3dControlsRef.value.backgroundColor = newValue
-})
-
-watch(showLightIntensityButton, (newValue) => {
-  load3dControlsRef.value.showLightIntensityButton = newValue
-})
-
-watch(showFOVButton, (newValue) => {
-  load3dControlsRef.value.showFOVButton = newValue
-})
-
-watch(showPreviewButton, (newValue) => {
-  load3dControlsRef.value.showPreviewButton = newValue
-})
-
-const onToggleCamera = () => {
-  emit('toggleCamera')
-}
-const onToggleGrid = (value: boolean) => emit('toggleGrid', value)
-const onTogglePreview = (value: boolean) => {
-  emit('togglePreview', value)
-}
-const onUpdateBackgroundColor = (color: string) =>
-  emit('updateBackgroundColor', color)
-
-const onUpdateLightIntensity = (lightIntensity: number) => {
-  emit('updateLightIntensity', lightIntensity)
-}
-
-const onUpdateFOV = (fov: number) => {
-  emit('updateFOV', fov)
-}
+watch(
+  () => props.animations,
+  (newVal) => {
+    animations.value = newVal
+  }
+)
 
 const togglePlay = () => {
   playing.value = !playing.value
+
   emit('togglePlay', playing.value)
 }
 
@@ -153,16 +78,4 @@ const speedChange = () => {
 const animationChange = () => {
   emit('animationChange', selectedAnimation.value)
 }
-
-defineExpose({
-  animations,
-  selectedAnimation,
-  playing,
-  backgroundColor,
-  showGrid,
-  lightIntensity,
-  showLightIntensityButton,
-  fov,
-  showFOVButton
-})
 </script>
diff --git a/src/components/load3d/Load3DAnimationScene.vue b/src/components/load3d/Load3DAnimationScene.vue
new file mode 100644
index 000000000..fa50235a4
--- /dev/null
+++ b/src/components/load3d/Load3DAnimationScene.vue
@@ -0,0 +1,162 @@
+<template>
+  <Load3DScene
+    :node="node"
+    :type="type"
+    :backgroundColor="backgroundColor"
+    :showGrid="showGrid"
+    :lightIntensity="lightIntensity"
+    :fov="fov"
+    :cameraType="cameraType"
+    :showPreview="showPreview"
+    :extraListeners="animationListeners"
+    @materialModeChange="listenMaterialModeChange"
+    @backgroundColorChange="listenBackgroundColorChange"
+    @lightIntensityChange="listenLightIntensityChange"
+    @fovChange="listenFOVChange"
+    @cameraTypeChange="listenCameraTypeChange"
+    @showGridChange="listenShowGridChange"
+    @showPreviewChange="listenShowPreviewChange"
+    ref="load3DSceneRef"
+  />
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import Load3DScene from '@/components/load3d/Load3DScene.vue'
+
+const props = defineProps<{
+  node: any
+  type: 'Load3DAnimation' | 'Preview3DAnimation'
+  backgroundColor: string
+  showGrid: boolean
+  lightIntensity: number
+  fov: number
+  cameraType: 'perspective' | 'orthographic'
+  showPreview: boolean
+  materialMode: 'original' | 'normal' | 'wireframe' | 'depth'
+  showFOVButton: boolean
+  showLightIntensityButton: boolean
+  playing: boolean
+  selectedSpeed: number
+  selectedAnimation: number
+}>()
+
+const node = ref(props.node)
+const backgroundColor = ref(props.backgroundColor)
+const showPreview = ref(props.showPreview)
+const fov = ref(props.fov)
+const lightIntensity = ref(props.lightIntensity)
+const cameraType = ref(props.cameraType)
+const showGrid = ref(props.showGrid)
+const materialMode = ref(props.materialMode)
+const showFOVButton = ref(props.showFOVButton)
+const showLightIntensityButton = ref(props.showLightIntensityButton)
+const load3DSceneRef = ref(null)
+
+watch(
+  () => props.cameraType,
+  (newValue) => {
+    cameraType.value = newValue
+  }
+)
+
+watch(
+  () => props.showGrid,
+  (newValue) => {
+    showGrid.value = newValue
+  }
+)
+
+watch(
+  () => props.backgroundColor,
+  (newValue) => {
+    backgroundColor.value = newValue
+  }
+)
+
+watch(
+  () => props.lightIntensity,
+  (newValue) => {
+    lightIntensity.value = newValue
+  }
+)
+
+watch(
+  () => props.fov,
+  (newValue) => {
+    fov.value = newValue
+  }
+)
+
+watch(
+  () => props.showPreview,
+  (newValue) => {
+    showPreview.value = newValue
+  }
+)
+
+watch(
+  () => props.playing,
+  (newValue) => {
+    load3DSceneRef.value.load3d.toggleAnimation(newValue)
+  }
+)
+
+watch(
+  () => props.selectedSpeed,
+  (newValue) => {
+    load3DSceneRef.value.load3d.setAnimationSpeed(newValue)
+  }
+)
+
+watch(
+  () => props.selectedAnimation,
+  (newValue) => {
+    load3DSceneRef.value.load3d.updateSelectedAnimation(newValue)
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'animationListChange', animationList: string): void
+}>()
+
+const listenMaterialModeChange = (
+  mode: 'original' | 'normal' | 'wireframe' | 'depth'
+) => {
+  materialMode.value = mode
+
+  showLightIntensityButton.value = mode === 'original'
+}
+
+const listenBackgroundColorChange = (value: string) => {
+  backgroundColor.value = value
+}
+
+const listenLightIntensityChange = (value: number) => {
+  lightIntensity.value = value
+}
+
+const listenFOVChange = (value: number) => {
+  fov.value = value
+}
+
+const listenCameraTypeChange = (value: 'perspective' | 'orthographic') => {
+  cameraType.value = value
+
+  showFOVButton.value = cameraType.value === 'perspective'
+}
+
+const listenShowGridChange = (value: boolean) => {
+  showGrid.value = value
+}
+
+const listenShowPreviewChange = (value: boolean) => {
+  showPreview.value = value
+}
+
+const animationListeners = {
+  animationListChange: (newValue: any) => {
+    emit('animationListChange', newValue)
+  }
+}
+</script>
diff --git a/src/components/load3d/Load3DControls.vue b/src/components/load3d/Load3DControls.vue
index 6d3dcdc0f..407a263d2 100644
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -2,9 +2,9 @@
   <div
     class="absolute top-2 left-2 flex flex-col gap-2 pointer-events-auto z-20"
   >
-    <Button class="p-button-rounded p-button-text" @click="toggleCamera">
+    <Button class="p-button-rounded p-button-text" @click="switchCamera">
       <i
-        class="pi pi-camera text-white text-lg"
+        :class="['pi', getCameraIcon, 'text-white text-lg']"
         v-tooltip.right="{ value: t('load3d.switchCamera'), showDelay: 300 }"
       ></i>
     </Button>
@@ -13,9 +13,11 @@
       class="p-button-rounded p-button-text"
       :class="{ 'p-button-outlined': showGrid }"
       @click="toggleGrid"
-      v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
     >
-      <i class="pi pi-table text-white text-lg"></i>
+      <i
+        class="pi pi-table text-white text-lg"
+        v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
+      ></i>
     </Button>
 
     <Button class="p-button-rounded p-button-text" @click="openColorPicker">
@@ -34,7 +36,7 @@
       />
     </Button>
 
-    <div class="relative" v-if="showLightIntensityButton">
+    <div class="relative show-light-intensity" v-if="showLightIntensityButton">
       <Button
         class="p-button-rounded p-button-text"
         @click="toggleLightIntensity"
@@ -63,7 +65,7 @@
       </div>
     </div>
 
-    <div class="relative" v-if="showFOVButton">
+    <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"
@@ -102,12 +104,15 @@
 </template>
 
 <script setup lang="ts">
+import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 import Slider from 'primevue/slider'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { t } from '@/i18n'
 
+const vTooltip = Tooltip
+
 const props = defineProps<{
   backgroundColor: string
   showGrid: boolean
@@ -117,10 +122,11 @@ const props = defineProps<{
   fov: number
   showFOVButton: boolean
   showPreviewButton: boolean
+  cameraType: 'perspective' | 'orthographic'
 }>()
 
 const emit = defineEmits<{
-  (e: 'toggleCamera'): void
+  (e: 'switchCamera'): void
   (e: 'toggleGrid', value: boolean): void
   (e: 'updateBackgroundColor', color: string): void
   (e: 'updateLightIntensity', value: number): void
@@ -140,8 +146,8 @@ const showFOV = ref(false)
 const showFOVButton = ref(props.showFOVButton)
 const showPreviewButton = ref(props.showPreviewButton)
 
-const toggleCamera = () => {
-  emit('toggleCamera')
+const switchCamera = () => {
+  emit('switchCamera')
 }
 
 const toggleGrid = () => {
@@ -181,12 +187,64 @@ const updateFOV = () => {
 const closeSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 
-  if (!target.closest('.relative')) {
-    showLightIntensity.value = false
+  if (!target.closest('.show-fov')) {
     showFOV.value = false
   }
+
+  if (!target.closest('.show-light-intensity')) {
+    showLightIntensity.value = false
+  }
 }
 
+watch(
+  () => props.backgroundColor,
+  (newValue) => {
+    backgroundColor.value = newValue
+  }
+)
+
+watch(
+  () => props.fov,
+  (newValue) => {
+    fov.value = newValue
+  }
+)
+
+watch(
+  () => props.lightIntensity,
+  (newValue) => {
+    lightIntensity.value = newValue
+  }
+)
+
+watch(
+  () => props.showFOVButton,
+  (newValue) => {
+    showFOVButton.value = newValue
+  }
+)
+
+watch(
+  () => props.showLightIntensityButton,
+  (newValue) => {
+    showLightIntensityButton.value = newValue
+  }
+)
+
+watch(
+  () => props.showPreviewButton,
+  (newValue) => {
+    showPreviewButton.value = newValue
+  }
+)
+
+watch(
+  () => props.showPreview,
+  (newValue) => {
+    showPreview.value = newValue
+  }
+)
+
 onMounted(() => {
   document.addEventListener('click', closeSlider)
 })
@@ -195,13 +253,7 @@ onUnmounted(() => {
   document.removeEventListener('click', closeSlider)
 })
 
-defineExpose({
-  backgroundColor,
-  showGrid,
-  lightIntensity,
-  showLightIntensityButton,
-  fov,
-  showFOVButton,
-  showPreviewButton
+const getCameraIcon = computed(() => {
+  return props.cameraType === 'perspective' ? 'pi-camera' : 'pi-th-large'
 })
 </script>
diff --git a/src/components/load3d/Load3DScene.vue b/src/components/load3d/Load3DScene.vue
new file mode 100644
index 000000000..9f3198e46
--- /dev/null
+++ b/src/components/load3d/Load3DScene.vue
@@ -0,0 +1,96 @@
+<template>
+  <div ref="container" class="w-full h-full"></div>
+</template>
+
+<script setup lang="ts">
+import { LGraphNode } from '@comfyorg/litegraph'
+import { onMounted, onUnmounted, ref, toRaw, watchEffect } from 'vue'
+
+import Load3d from '@/extensions/core/load3d/Load3d'
+import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import { useLoad3dService } from '@/services/load3dService'
+
+const props = defineProps<{
+  node: any
+  type: 'Load3D' | 'Load3DAnimation' | 'Preview3D' | 'Preview3DAnimation'
+  backgroundColor: string
+  showGrid: boolean
+  lightIntensity: number
+  fov: number
+  cameraType: 'perspective' | 'orthographic'
+  showPreview: boolean
+  extraListeners?: Record<string, (value: any) => void>
+}>()
+
+const container = ref<HTMLElement | null>(null)
+const node = ref(props.node)
+const load3d = ref<Load3d | Load3dAnimation | null>(null)
+
+const eventConfig = {
+  materialModeChange: (value: string) => emit('materialModeChange', value),
+  backgroundColorChange: (value: string) =>
+    emit('backgroundColorChange', value),
+  lightIntensityChange: (value: number) => emit('lightIntensityChange', value),
+  fovChange: (value: number) => emit('fovChange', value),
+  cameraTypeChange: (value: string) => emit('cameraTypeChange', value),
+  showGridChange: (value: boolean) => emit('showGridChange', value),
+  showPreviewChange: (value: boolean) => emit('showPreviewChange', value)
+} as const
+
+watchEffect(() => {
+  if (load3d.value) {
+    const rawLoad3d = toRaw(load3d.value)
+
+    rawLoad3d.setBackgroundColor(props.backgroundColor)
+    rawLoad3d.toggleGrid(props.showGrid)
+    rawLoad3d.setLightIntensity(props.lightIntensity)
+    rawLoad3d.setFOV(props.fov)
+    rawLoad3d.toggleCamera(props.cameraType)
+    rawLoad3d.togglePreview(props.showPreview)
+  }
+})
+
+const emit = defineEmits<{
+  (e: 'materialModeChange', materialMode: string): void
+  (e: 'backgroundColorChange', color: string): void
+  (e: 'lightIntensityChange', lightIntensity: number): void
+  (e: 'fovChange', fov: number): void
+  (e: 'cameraTypeChange', cameraType: string): void
+  (e: 'showGridChange', showGrid: boolean): void
+  (e: 'showPreviewChange', showPreview: boolean): void
+}>()
+
+const handleEvents = (action: 'add' | 'remove') => {
+  if (!load3d.value) return
+
+  Object.entries(eventConfig).forEach(([event, handler]) => {
+    const method = `${action}EventListener` as const
+    load3d.value?.[method](event, handler)
+  })
+
+  if (props.extraListeners) {
+    Object.entries(props.extraListeners).forEach(([event, handler]) => {
+      const method = `${action}EventListener` as const
+      load3d.value?.[method](event, handler)
+    })
+  }
+}
+
+onMounted(() => {
+  load3d.value = useLoad3dService().registerLoad3d(
+    node.value as LGraphNode,
+    container.value,
+    props.type
+  )
+  handleEvents('add')
+})
+
+onUnmounted(() => {
+  handleEvents('remove')
+  useLoad3dService().removeLoad3d(node.value as LGraphNode)
+})
+
+defineExpose({
+  load3d
+})
+</script>
diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts
index 8c79fa109..99af54d34 100644
--- a/src/extensions/core/load3d.ts
+++ b/src/extensions/core/load3d.ts
@@ -1,8 +1,11 @@
 // @ts-strict-ignore
 import { IWidget } from '@comfyorg/litegraph'
-import type { IStringWidget } from '@comfyorg/litegraph/dist/types/widgets'
-import { nextTick } from 'vue'
+import { IStringWidget } from '@comfyorg/litegraph/dist/types/widgets'
+import PrimeVue from 'primevue/config'
+import { createApp, h, nextTick, render } from 'vue'
 
+import Load3D from '@/components/load3d/Load3D.vue'
+import Load3DAnimation from '@/components/load3d/Load3DAnimation.vue'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
@@ -21,51 +24,54 @@ app.registerExtension({
         const container = document.createElement('div')
         container.classList.add('comfy-load-3d')
 
-        const load3d = useLoad3dService().registerLoad3d(
-          node,
-          container,
-          'Load3D'
-        )
+        /* Hold off for now
+        const mountComponent = () => {
+          const vnode = h(Load3D, {
+            node: node,
+            type: 'Load3D'
+          })
 
-        node.onMouseEnter = function () {
-          if (load3d) {
-            load3d.refreshViewport()
-          }
+          render(vnode, container)
         }
+         */
 
-        node.onResize = function () {
-          if (load3d) {
-            load3d.handleResize()
-          }
-        }
+        let controlsApp = createApp(Load3D, {
+          node: node,
+          type: 'Load3D'
+        })
+
+        controlsApp.mount(container)
 
         const origOnRemoved = node.onRemoved
 
         node.onRemoved = function () {
-          if (load3d) {
-            load3d.remove()
+          /*
+          render(null, container)
+
+          container.remove()
+           */
+
+          if (controlsApp) {
+            controlsApp.unmount()
+            controlsApp = null
           }
 
-          useLoad3dService().removeLoad3d(node)
-
           origOnRemoved?.apply(this, [])
         }
 
-        node.onDrawBackground = function () {
-          load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
-        }
-
         const fileInput = document.createElement('input')
         fileInput.type = 'file'
         fileInput.accept = '.gltf,.glb,.obj,.mtl,.fbx,.stl'
         fileInput.style.display = 'none'
+
         fileInput.onchange = async () => {
           if (fileInput.files?.length) {
             const modelWidget = node.widgets?.find(
               (w: IWidget) => w.name === 'model_file'
             ) as IStringWidget
+
             const uploadPath = await Load3dUtils.uploadFile(
-              load3d,
+              useLoad3dService().getLoad3d(node),
               fileInput.files[0],
               fileInput
             ).catch((error) => {
@@ -88,7 +94,8 @@ app.registerExtension({
         })
 
         node.addWidget('button', 'clear', 'clear', () => {
-          load3d.clearModel()
+          useLoad3dService().getLoad3d(node).clearModel()
+
           const modelWidget = node.widgets?.find(
             (w: IWidget) => w.name === 'model_file'
           )
@@ -97,6 +104,8 @@ app.registerExtension({
           }
         })
 
+        //mountComponent()
+
         return {
           widget: node.addDOMWidget(inputName, 'LOAD_3D', container)
         }
@@ -177,40 +186,43 @@ app.registerExtension({
 
         container.classList.add('comfy-load-3d-animation')
 
-        const load3d = useLoad3dService().registerLoad3d(
-          node,
-          container,
-          'Load3DAnimation'
-        )
+        /*
+          const mountComponent = () => {
+          const vnode = h(Load3DAnimation, {
+            node: node,
+            type: 'Load3DAnimation'
+          })
 
-        node.onMouseEnter = function () {
-          if (load3d) {
-            load3d.refreshViewport()
-          }
+          render(vnode, container)
         }
+         */
 
-        node.onResize = function () {
-          if (load3d) {
-            load3d.handleResize()
-          }
-        }
+        let controlsApp = createApp(Load3DAnimation, {
+          node: node,
+          type: 'Load3DAnimation'
+        })
+
+        controlsApp.use(PrimeVue)
+
+        controlsApp.mount(container)
 
         const origOnRemoved = node.onRemoved
 
         node.onRemoved = function () {
-          if (load3d) {
-            load3d.remove()
+          /*
+          render(null, container)
+
+          container.remove()
+           */
+
+          if (controlsApp) {
+            controlsApp.unmount()
+            controlsApp = null
           }
 
-          useLoad3dService().removeLoad3d(node)
-
           origOnRemoved?.apply(this, [])
         }
 
-        node.onDrawBackground = function () {
-          load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
-        }
-
         const fileInput = document.createElement('input')
         fileInput.type = 'file'
         fileInput.accept = '.fbx,glb,gltf'
@@ -221,7 +233,7 @@ app.registerExtension({
               (w: IWidget) => w.name === 'model_file'
             ) as IStringWidget
             const uploadPath = await Load3dUtils.uploadFile(
-              load3d,
+              useLoad3dService().getLoad3d(node),
               fileInput.files[0],
               fileInput
             ).catch((error) => {
@@ -244,7 +256,7 @@ app.registerExtension({
         })
 
         node.addWidget('button', 'clear', 'clear', () => {
-          load3d.clearModel()
+          useLoad3dService().getLoad3d(node).clearModel()
           const modelWidget = node.widgets?.find(
             (w: IWidget) => w.name === 'model_file'
           )
@@ -253,6 +265,8 @@ app.registerExtension({
           }
         })
 
+        //mountComponent()
+
         return {
           widget: node.addDOMWidget(inputName, 'LOAD_3D_ANIMATION', container)
         }
@@ -342,39 +356,42 @@ app.registerExtension({
 
         container.classList.add('comfy-preview-3d')
 
-        const load3d = useLoad3dService().registerLoad3d(
-          node,
-          container,
-          'Preview3D'
-        )
+        /*
+        const mountComponent = () => {
+          const vnode = h(Load3D, {
+            node: node,
+            type: 'Preview3D'
+          })
 
-        node.onMouseEnter = function () {
-          if (load3d) {
-            load3d.refreshViewport()
-          }
+          render(vnode, container)
         }
+         */
 
-        node.onResize = function () {
-          if (load3d) {
-            load3d.handleResize()
-          }
-        }
+        let controlsApp = createApp(Load3D, {
+          node: node,
+          type: 'Preview3D'
+        })
+
+        controlsApp.mount(container)
 
         const origOnRemoved = node.onRemoved
 
         node.onRemoved = function () {
-          if (load3d) {
-            load3d.remove()
-          }
+          /*
+          render(null, container)
 
-          useLoad3dService().removeLoad3d(node)
+          container.remove()
+           */
+
+          if (controlsApp) {
+            controlsApp.unmount()
+            controlsApp = null
+          }
 
           origOnRemoved?.apply(this, [])
         }
 
-        node.onDrawBackground = function () {
-          load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
-        }
+        //mountComponent()
 
         return {
           widget: node.addDOMWidget(inputName, 'PREVIEW_3D', container)
@@ -447,40 +464,32 @@ app.registerExtension({
 
         container.classList.add('comfy-preview-3d-animation')
 
-        const load3d = useLoad3dService().registerLoad3d(
-          node,
-          container,
-          'Preview3DAnimation'
-        )
+        let controlsApp = createApp(Load3DAnimation, {
+          node: node,
+          type: 'Preview3DAnimation'
+        })
 
-        node.onMouseEnter = function () {
-          if (load3d) {
-            load3d.refreshViewport()
-          }
-        }
+        controlsApp.use(PrimeVue)
 
-        node.onResize = function () {
-          if (load3d) {
-            load3d.handleResize()
-          }
-        }
+        controlsApp.mount(container)
 
         const origOnRemoved = node.onRemoved
 
         node.onRemoved = function () {
-          if (load3d) {
-            load3d.remove()
+          /*
+          render(null, container)
+
+          container.remove()
+           */
+
+          if (controlsApp) {
+            controlsApp.unmount()
+            controlsApp = null
           }
 
-          useLoad3dService().removeLoad3d(node)
-
           origOnRemoved?.apply(this, [])
         }
 
-        node.onDrawBackground = function () {
-          load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
-        }
-
         return {
           widget: node.addDOMWidget(
             inputName,
diff --git a/src/extensions/core/load3d/Load3DConfiguration.ts b/src/extensions/core/load3d/Load3DConfiguration.ts
index 341e215ee..928689374 100644
--- a/src/extensions/core/load3d/Load3DConfiguration.ts
+++ b/src/extensions/core/load3d/Load3DConfiguration.ts
@@ -88,17 +88,22 @@ class Load3DConfiguration {
     this.load3d.toggleCamera(cameraType)
 
     const showGrid = this.load3d.loadNodeProperty('Show Grid', true)
+
     this.load3d.toggleGrid(showGrid)
 
+    const showPreview = this.load3d.loadNodeProperty('Show Preview', true)
+
+    this.load3d.togglePreview(showPreview)
+
     const bgColor = this.load3d.loadNodeProperty('Background Color', '#282828')
 
     this.load3d.setBackgroundColor(bgColor)
 
-    const lightIntensity = this.load3d.loadNodeProperty('Light Intensity', '5')
+    const lightIntensity = this.load3d.loadNodeProperty('Light Intensity', 5)
 
     this.load3d.setLightIntensity(lightIntensity)
 
-    const fov = this.load3d.loadNodeProperty('FOV', '75')
+    const fov = this.load3d.loadNodeProperty('FOV', 75)
 
     this.load3d.setFOV(fov)
   }
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index ee30f962a..7ae6876f0 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -8,11 +8,14 @@ import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
-import { App, createApp } from 'vue'
 
-import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import { useToastStore } from '@/stores/toastStore'
 
+interface Load3DOptions {
+  createPreview?: boolean
+  node?: LGraphNode
+}
+
 class Load3d {
   scene: THREE.Scene
   perspectiveCamera: THREE.PerspectiveCamera
@@ -51,14 +54,15 @@ class Load3d {
   targetHeight: number = 1024
   showPreview: boolean = true
   node: LGraphNode = {} as LGraphNode
-
-  protected controlsApp: App | null = null
-  protected controlsContainer: HTMLDivElement
+  private listeners: { [key: string]: Function[] } = {}
 
   constructor(
     container: Element | HTMLElement,
-    options: { createPreview?: boolean } = {}
+    options: Load3DOptions = {
+      node: {} as LGraphNode
+    }
   ) {
+    this.node = options.node || ({} as LGraphNode)
     this.scene = new THREE.Scene()
 
     this.perspectiveCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
@@ -140,53 +144,30 @@ class Load3d {
       this.createCapturePreview(container)
     }
 
-    this.controlsContainer = document.createElement('div')
-    this.controlsContainer.style.position = 'absolute'
-    this.controlsContainer.style.top = '0'
-    this.controlsContainer.style.left = '0'
-    this.controlsContainer.style.width = '100%'
-    this.controlsContainer.style.height = '100%'
-    this.controlsContainer.style.pointerEvents = 'none'
-    this.controlsContainer.style.zIndex = '1'
-    container.appendChild(this.controlsContainer)
-
-    this.mountControls(options)
-
     this.handleResize()
 
     this.startAnimation()
   }
 
-  protected mountControls(options: { createPreview?: boolean } = {}) {
-    const controlsMount = document.createElement('div')
-    controlsMount.style.pointerEvents = 'auto'
-    this.controlsContainer.appendChild(controlsMount)
-
-    this.controlsApp = createApp(Load3DControls, {
-      backgroundColor: '#282828',
-      showGrid: true,
-      showPreview: options.createPreview,
-      lightIntensity: 5,
-      showLightIntensityButton: true,
-      fov: 75,
-      showFOVButton: true,
-      showPreviewButton: options.createPreview,
-      onToggleCamera: () => this.toggleCamera(),
-      onToggleGrid: (show: boolean) => this.toggleGrid(show),
-      onTogglePreview: (show: boolean) => this.togglePreview(show),
-      onUpdateBackgroundColor: (color: string) =>
-        this.setBackgroundColor(color),
-      onUpdateLightIntensity: (lightIntensity: number) =>
-        this.setLightIntensity(lightIntensity),
-      onUpdateFOV: (fov: number) => this.setFOV(fov)
-    })
-
-    this.controlsApp.directive('tooltip', Tooltip)
-    this.controlsApp.mount(controlsMount)
+  addEventListener(event: string, callback: Function) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = []
+    }
+    this.listeners[event].push(callback)
   }
 
-  setNode(node: LGraphNode) {
-    this.node = node
+  removeEventListener(event: string, callback: Function) {
+    if (this.listeners[event]) {
+      this.listeners[event] = this.listeners[event].filter(
+        (cb) => cb !== callback
+      )
+    }
+  }
+
+  emitEvent(event: string, data?: any) {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach((callback) => callback(data))
+    }
   }
 
   storeNodeProperty(name: string, value: any) {
@@ -339,8 +320,6 @@ class Load3d {
       this.perspectiveCamera.fov = fov
       this.perspectiveCamera.updateProjectionMatrix()
       this.renderer.render(this.scene, this.activeCamera)
-
-      this.storeNodeProperty('FOV', fov)
     }
 
     if (
@@ -351,6 +330,8 @@ class Load3d {
       this.previewCamera.updateProjectionMatrix()
       this.previewRenderer.render(this.scene, this.previewCamera)
     }
+
+    this.emitEvent('fovChange', fov)
   }
 
   getCameraState() {
@@ -430,11 +411,6 @@ class Load3d {
   setMaterialMode(mode: 'original' | 'normal' | 'wireframe' | 'depth') {
     this.materialMode = mode
 
-    if (this.controlsApp?._instance?.exposed) {
-      this.controlsApp._instance.exposed.showLightIntensityButton.value =
-        mode == 'original'
-    }
-
     if (this.currentModel) {
       if (mode === 'depth') {
         this.renderer.outputColorSpace = THREE.LinearSRGBColorSpace
@@ -528,6 +504,8 @@ class Load3d {
       })
 
       this.renderer.render(this.scene, this.activeCamera)
+
+      this.emitEvent('materialModeChange', mode)
     }
   }
 
@@ -608,14 +586,10 @@ class Load3d {
     )
     this.viewHelper.center = this.controls.target
 
-    if (this.controlsApp?._instance?.exposed) {
-      this.controlsApp._instance.exposed.showFOVButton.value =
-        this.getCurrentCameraType() == 'perspective'
-    }
-
-    this.storeNodeProperty('Camera Type', this.getCurrentCameraType())
     this.handleResize()
     this.updatePreviewRender()
+
+    this.emitEvent('cameraTypeChange', cameraType)
   }
 
   getCurrentCameraType(): 'perspective' | 'orthographic' {
@@ -627,9 +601,9 @@ class Load3d {
   toggleGrid(showGrid: boolean) {
     if (this.gridHelper) {
       this.gridHelper.visible = showGrid
-
-      this.storeNodeProperty('Show Grid', showGrid)
     }
+
+    this.emitEvent('showGridChange', showGrid)
   }
 
   togglePreview(showPreview: boolean) {
@@ -637,9 +611,9 @@ class Load3d {
       this.showPreview = showPreview
 
       this.previewContainer.style.display = this.showPreview ? 'block' : 'none'
-
-      this.storeNodeProperty('Show Preview', showPreview)
     }
+
+    this.emitEvent('showPreviewChange', showPreview)
   }
 
   setLightIntensity(intensity: number) {
@@ -659,7 +633,7 @@ class Load3d {
       }
     })
 
-    this.storeNodeProperty('Light Intensity', intensity)
+    this.emitEvent('lightIntensityChange', intensity)
   }
 
   startAnimation() {
@@ -771,10 +745,6 @@ class Load3d {
     this.controls.dispose()
     this.viewHelper.dispose()
     this.renderer.dispose()
-    if (this.controlsApp) {
-      this.controlsApp.unmount()
-      this.controlsApp = null
-    }
     this.renderer.domElement.remove()
     this.scene.clear()
   }
@@ -1044,11 +1014,7 @@ class Load3d {
     this.renderer.setClearColor(new THREE.Color(color))
     this.renderer.render(this.scene, this.activeCamera)
 
-    if (this.controlsApp?._instance?.exposed) {
-      this.controlsApp._instance.exposed.backgroundColor.value = color
-    }
-
-    this.storeNodeProperty('Background Color', color)
+    this.emitEvent('backgroundColorChange', color)
   }
 }
 
diff --git a/src/extensions/core/load3d/Load3dAnimation.ts b/src/extensions/core/load3d/Load3dAnimation.ts
index 959c3221e..08fe40b62 100644
--- a/src/extensions/core/load3d/Load3dAnimation.ts
+++ b/src/extensions/core/load3d/Load3dAnimation.ts
@@ -6,6 +6,11 @@ import { createApp } from 'vue'
 import Load3DAnimationControls from '@/components/load3d/Load3DAnimationControls.vue'
 import Load3d from '@/extensions/core/load3d/Load3d'
 
+interface AnimationItem {
+  name: string
+  index: number
+}
+
 class Load3dAnimation extends Load3d {
   currentAnimation: THREE.AnimationMixer | null = null
   animationActions: THREE.AnimationAction[] = []
@@ -22,53 +27,17 @@ class Load3dAnimation extends Load3d {
     super(container, options)
   }
 
-  protected mountControls(options: { createPreview?: boolean } = {}) {
-    const controlsMount = document.createElement('div')
-    controlsMount.style.pointerEvents = 'auto'
-    this.controlsContainer.appendChild(controlsMount)
-
-    this.controlsApp = createApp(Load3DAnimationControls, {
-      backgroundColor: '#282828',
-      showGrid: true,
-      showPreview: options.createPreview,
-      animations: [],
-      playing: false,
-      lightIntensity: 5,
-      showLightIntensityButton: true,
-      fov: 75,
-      showFOVButton: true,
-      showPreviewButton: options.createPreview,
-      onToggleCamera: () => this.toggleCamera(),
-      onToggleGrid: (show: boolean) => this.toggleGrid(show),
-      onTogglePreview: (show: boolean) => this.togglePreview(show),
-      onUpdateBackgroundColor: (color: string) =>
-        this.setBackgroundColor(color),
-      onTogglePlay: (play: boolean) => this.toggleAnimation(play),
-      onSpeedChange: (speed: number) => this.setAnimationSpeed(speed),
-      onAnimationChange: (selectedAnimation: number) =>
-        this.updateSelectedAnimation(selectedAnimation),
-      onUpdateLightIntensity: (lightIntensity: number) =>
-        this.setLightIntensity(lightIntensity),
-      onUpdateFOV: (fov: number) => this.setFOV(fov)
-    })
-
-    this.controlsApp.use(PrimeVue)
-    this.controlsApp.directive('tooltip', Tooltip)
-    this.controlsApp.mount(controlsMount)
-  }
-
   updateAnimationList() {
-    if (this.controlsApp?._instance?.exposed) {
-      if (this.animationClips.length > 0) {
-        this.controlsApp._instance.exposed.animations.value =
-          this.animationClips.map((clip, index) => ({
-            name: clip.name || `Animation ${index + 1}`,
-            index
-          }))
-      } else {
-        this.controlsApp._instance.exposed.animations.value = []
-      }
+    let updatedAnimationList: AnimationItem[] = []
+
+    if (this.animationClips.length > 0) {
+      updatedAnimationList = this.animationClips.map((clip, index) => ({
+        name: clip.name || `Animation ${index + 1}`,
+        index
+      }))
     }
+
+    this.emitEvent('animationListChange', updatedAnimationList)
   }
 
   protected async setupModel(model: THREE.Object3D) {
@@ -146,10 +115,6 @@ class Load3dAnimation extends Load3d {
     }
 
     this.animationActions = [action]
-
-    if (this.controlsApp?._instance?.exposed) {
-      this.controlsApp._instance.exposed.selectedAnimation.value = index
-    }
   }
 
   clearModel() {
@@ -165,10 +130,7 @@ class Load3dAnimation extends Load3d {
     this.isAnimationPlaying = false
     this.animationSpeed = 1.0
 
-    if (this.controlsApp?._instance?.exposed) {
-      this.controlsApp._instance.exposed.animations.value = []
-      this.controlsApp._instance.exposed.selectedAnimation.value = 0
-    }
+    this.emitEvent('animationListChange', [])
 
     super.clearModel()
   }
@@ -181,10 +143,6 @@ class Load3dAnimation extends Load3d {
 
     this.isAnimationPlaying = play ?? !this.isAnimationPlaying
 
-    if (this.controlsApp?._instance?.exposed) {
-      this.controlsApp._instance.exposed.playing.value = this.isAnimationPlaying
-    }
-
     this.animationActions.forEach((action) => {
       if (this.isAnimationPlaying) {
         action.paused = false
@@ -231,4 +189,5 @@ class Load3dAnimation extends Load3d {
   }
 }
 
+export { AnimationItem }
 export default Load3dAnimation
diff --git a/src/services/load3dService.ts b/src/services/load3dService.ts
index 4a48d347b..c891e2094 100644
--- a/src/services/load3dService.ts
+++ b/src/services/load3dService.ts
@@ -1,4 +1,5 @@
 import type { LGraphNode } from '@comfyorg/litegraph'
+import { toRaw } from 'vue'
 
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
@@ -21,8 +22,10 @@ export class Load3dService {
     container: HTMLElement,
     type: 'Load3D' | 'Load3DAnimation' | 'Preview3D' | 'Preview3DAnimation'
   ) {
-    if (this.nodeToLoad3dMap.has(node)) {
-      this.removeLoad3d(node)
+    const rawNode = toRaw(node)
+
+    if (this.nodeToLoad3dMap.has(rawNode)) {
+      this.removeLoad3d(rawNode)
     }
 
     const isAnimation = type.includes('Animation')
@@ -31,17 +34,32 @@ export class Load3dService {
 
     const isPreview = type.includes('Preview')
 
-    const instance = new Load3dClass(container, { createPreview: !isPreview })
+    const instance = new Load3dClass(container, {
+      createPreview: !isPreview,
+      node: rawNode
+    })
 
-    instance.setNode(node)
+    rawNode.onMouseEnter = function () {
+      instance.refreshViewport()
+    }
 
-    this.nodeToLoad3dMap.set(node, instance)
+    rawNode.onResize = function () {
+      instance.handleResize()
+    }
+
+    rawNode.onDrawBackground = function () {
+      instance.renderer.domElement.hidden = this.flags.collapsed ?? false
+    }
+
+    this.nodeToLoad3dMap.set(rawNode, instance)
 
     return instance
   }
 
   getLoad3d(node: LGraphNode): Load3d | Load3dAnimation | null {
-    return this.nodeToLoad3dMap.get(node) || null
+    const rawNode = toRaw(node)
+
+    return this.nodeToLoad3dMap.get(rawNode) || null
   }
 
   getNodeByLoad3d(load3d: Load3d | Load3dAnimation): LGraphNode | null {
@@ -54,10 +72,14 @@ export class Load3dService {
   }
 
   removeLoad3d(node: LGraphNode) {
-    const instance = this.nodeToLoad3dMap.get(node)
+    const rawNode = toRaw(node)
+
+    const instance = this.nodeToLoad3dMap.get(rawNode)
+
     if (instance) {
       instance.remove()
-      this.nodeToLoad3dMap.delete(node)
+
+      this.nodeToLoad3dMap.delete(rawNode)
     }
   }