From 1ae3c01e48648610a9c8dce010bd805acf178b18 Mon Sep 17 00:00:00 2001
From: Tino Koch <tinoooo@users.noreply.github.com>
Date: Wed, 26 Jul 2023 18:42:38 +0200
Subject: [PATCH] feat: changed camera behavior so that the first added camera
 is always the active one

---
 playground/src/pages/multiple-cameras.vue |  2 +-
 src/composables/useCamera/index.ts        | 38 ++++++-----------------
 2 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/playground/src/pages/multiple-cameras.vue b/playground/src/pages/multiple-cameras.vue
index aa1b971a7..1409131ca 100644
--- a/playground/src/pages/multiple-cameras.vue
+++ b/playground/src/pages/multiple-cameras.vue
@@ -22,7 +22,7 @@ watchEffect(() => {
   activeCameraUuid.value = camera1.value?.uuid
 })
 
-const camera3Exists = ref(true)
+const camera3Exists = ref(false)
 </script>
 
 <template>
diff --git a/src/composables/useCamera/index.ts b/src/composables/useCamera/index.ts
index dc23a28d6..d08999dde 100644
--- a/src/composables/useCamera/index.ts
+++ b/src/composables/useCamera/index.ts
@@ -5,39 +5,27 @@ import type { TresScene } from '../../types'
 import type { TresContext } from '../useTresContextProvider'
 
 
-interface TresCamera extends Camera {
-  userData: {
-    tres__isActiveCamera: boolean
-    [key: string]: any
-  }
-}
-
 export const useCamera = ({ sizes, scene }: Pick<TresContext, 'sizes'> & { scene: TresScene }) => {
 
   // computed "camera" relies on this to be a ref (not a shallowRef)
   // the computed does not trigger, when for example the camera postion changes
-  const cameras = ref<TresCamera[]>([])
-  const camera = computed<TresCamera | undefined>(
-    () => cameras.value.find(({ userData }) => userData.tres__isActiveCamera)
+  const cameras = ref<Camera[]>([])
+  const camera = computed<Camera | undefined>(
+    () => cameras.value[0]
   )
 
-  const addCamera = (newCamera: Camera, active = true) => {
+  const addCamera = (newCamera: Camera, active = false) => {
     if (cameras.value.some(({ uuid }) => uuid === newCamera.uuid))
       return
 
-    cameras.value.push(newCamera as TresCamera)
-
     if (active)
       setCameraActive(newCamera)
+    else
+      cameras.value.push(newCamera)
+
   }
 
   const removeCamera = (camera: Camera) => {
-    if ((camera as TresCamera).userData.tres__isActiveCamera) {
-      const lastCamera = cameras.value[cameras.value.length - 1];
-      if (lastCamera)
-        setCameraActive(lastCamera.uuid)
-    }
-
     cameras.value = cameras.value.filter(({ uuid }) => uuid !== camera.uuid)
   }
 
@@ -48,14 +36,8 @@ export const useCamera = ({ sizes, scene }: Pick<TresContext, 'sizes'> & { scene
 
     if (!camera) return
 
-    cameras.value.forEach(({ userData }) => userData.tres__isActiveCamera = false)
-
-    const tresCamera = camera as TresCamera
-    tresCamera.userData.tres__isActiveCamera = true
-  }
-
-  const clearCameras = () => {
-    cameras.value = []
+    const otherCameras = cameras.value.filter(({ uuid }) => uuid !== camera.uuid)
+    cameras.value = [camera, ...otherCameras]
   }
 
   watchEffect(() => {
@@ -74,7 +56,7 @@ export const useCamera = ({ sizes, scene }: Pick<TresContext, 'sizes'> & { scene
   scene.userData.tres__deregisterCamera = removeCamera
 
   onUnmounted(() => {
-    clearCameras()
+    cameras.value = []
   })
 
   return {