[3d] fully convert load 3d nodes into vue (#2590)

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>