chore(playground): streamline camera implementation with TresJS components

- Removed manual camera initialization in favor of using TresJS components for perspective and orthographic cameras.
- Updated the template to conditionally render the appropriate camera based on the selected camera type.
- Enhanced readability and maintainability by leveraging TresJS's built-in camera properties and methods.

playground/vue/src/pages/cameras/index.vue

@@ -6,27 +6,6 @@ import { OrthographicCamera, PerspectiveCamera } from 'three'
 import '@tresjs/leches/styles'
 import { useWindowSize } from '@vueuse/core'
 
-const perspectiveCamera = new PerspectiveCamera(75, 1, 0.1, 1000)
-const { width, height } = useWindowSize()
-const aspect = computed(() => width.value / height.value)
-
-const frustumSize = 10
-const orthographicCamera = new OrthographicCamera(
-  -frustumSize * aspect.value / 2,
-  frustumSize * aspect.value / 2,
-  frustumSize / 2,
-  -frustumSize / 2,
-  0.1,
-  1000,
-)
-
-orthographicCamera.zoom = 100
-
-perspectiveCamera.position.set(8, 8, 8)
-perspectiveCamera.lookAt(0, 0, 0)
-orthographicCamera.position.set(8, 8, 8)
-orthographicCamera.lookAt(0, 0, 0)
-
 const { cameraType } = useControls({
   cameraType: {
     value: 'perspective',
@@ -39,18 +18,28 @@ const { cameraType } = useControls({
     }],
   },
 })
-
-const currentCamera = computed(() => {
-  return cameraType.value === 'perspective' ? perspectiveCamera : orthographicCamera
-})
 </script>
 
 <template>
   <TresLeches />
   <TresCanvas
     clear-color="#82DBC5"
-    :camera="currentCamera"
   >
+    <TresPerspectiveCamera
+      v-if="cameraType === 'perspective'"
+      :position="[8, 8, 8]"
+      :fov="75"
+      :near="0.1"
+      :far="1000"
+      :look-at="[0, 0, 0]"
+    />
+    <TresOrthographicCamera
+      v-else
+      :position="[8, 8, 8]"
+      :near="0.1"
+      :far="1000"
+      :look-at="[0, 0, 0]"
+    />
     <Box
       :position="[0, 1, 0]"
       :scale="[2, 2, 2]"