[TS] Type component ref for 3D components (#3127)

src/components/load3d/Load3D.vue

@@ -95,7 +95,7 @@ const backgroundImage = ref('')
 const upDirection = ref<UpDirection>('original')
 const materialMode = ref<MaterialMode>('original')
 const edgeThreshold = ref(85)
-const load3DSceneRef = ref(null)
+const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
 
 const showPreviewButton = computed(() => {
   return !type.includes('Preview')

src/components/load3d/Load3DAnimation.vue

@@ -115,7 +115,9 @@ const showPreviewButton = computed(() => {
   return !type.includes('Preview')
 })
 
-const load3DAnimationSceneRef = ref(null)
+const load3DAnimationSceneRef = ref<InstanceType<
+  typeof Load3DAnimationScene
+> | null>(null)
 
 const handleMouseEnter = () => {
   const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef

src/components/load3d/Load3DAnimationScene.vue

@@ -26,6 +26,7 @@
 import { ref, watch } from 'vue'
 
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
+import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import {
   CameraType,
   Load3DAnimationNodeType,
@@ -63,7 +64,7 @@ const upDirection = ref(props.upDirection)
 const materialMode = ref(props.materialMode)
 const showFOVButton = ref(props.showFOVButton)
 const showLightIntensityButton = ref(props.showLightIntensityButton)
-const load3DSceneRef = ref(null)
+const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
 
 watch(
   () => props.cameraType,
@@ -124,21 +125,24 @@ watch(
 watch(
   () => props.playing,
   (newValue) => {
-    load3DSceneRef.value.load3d.toggleAnimation(newValue)
+    const load3d = load3DSceneRef.value?.load3d as Load3dAnimation | null
+    load3d?.toggleAnimation(newValue)
   }
 )
 
 watch(
   () => props.selectedSpeed,
   (newValue) => {
-    load3DSceneRef.value.load3d.setAnimationSpeed(newValue)
+    const load3d = load3DSceneRef.value?.load3d as Load3dAnimation | null
+    load3d?.setAnimationSpeed(newValue)
   }
 )
 
 watch(
   () => props.selectedAnimation,
   (newValue) => {
-    load3DSceneRef.value.load3d.updateSelectedAnimation(newValue)
+    const load3d = load3DSceneRef.value?.load3d as Load3dAnimation | null
+    load3d?.updateSelectedAnimation(newValue)
   }
 )