refactor: enhance orthographic camera setup and controls

- Updated the orthographic camera initialization to correctly calculate frustum dimensions based on the aspect ratio.
- Introduced zoom functionality for the orthographic camera.
- Simplified the useControls setup by removing unnecessary properties and focusing on essential controls.
- Adjusted the camera update logic to reflect the new control structure, ensuring proper projection matrix updates.

playground/vue/src/pages/cameras/OrthographicCamera.vue

@@ -3,37 +3,23 @@ import { TresCanvas } from '@tresjs/core'
 import type { OrthographicCamera } from 'three'
 import { Vector3 } from 'three'
 import { TresLeches, useControls } from '@tresjs/leches'
+import { useWindowSize } from '@vueuse/core'
 
-const { left, right, top, bottom, zoom, position, lookAt, near, far } = useControls({
+const { width, height } = useWindowSize()
+const aspect = computed(() => width.value / height.value)
+
+const { zoom, position, lookAt, near, far, frustum } = useControls({
   position: new Vector3(1, 1, 1),
   lookAt: new Vector3(0, 0, 0),
-  top: {
-    value: 500,
-    min: -1000,
-    max: 1000,
-    step: 1,
-  },
-  bottom: {
-    value: -500,
-    min: -1000,
-    max: 1000,
-    step: 1,
-  },
-  left: {
-    value: -500,
-    min: -1000,
-    max: 1000,
-    step: 1,
-  },
-  right: {
-    value: 500,
-    min: -100,
-    max: 1000,
-    step: 1,
+  frustum: {
+    value: 10,
+    min: 0,
+    max: 100,
+    step: 10,
   },
   zoom: {
     value: 1,
-    min: 1,
+    min: -100,
     max: 100,
     step: 1,
   },
@@ -52,7 +38,7 @@ const { left, right, top, bottom, zoom, position, lookAt, near, far } = useContr
 })
 const cameraRef = ref<OrthographicCamera>()
 
-watch([left, right, top, bottom, zoom, near, far], () => {
+watch([zoom, near, far, frustum], () => {
   cameraRef.value?.updateProjectionMatrix()
 })
 </script>
@@ -64,7 +50,10 @@ watch([left, right, top, bottom, zoom, near, far], () => {
       ref="cameraRef"
       :position="[position.x, position.y, position.z]"
       :look-at="[lookAt.x, lookAt.y, lookAt.z]"
-      :args="[left, right, top, bottom, near, far]"
+      :args="[-frustum * aspect, frustum * aspect, frustum, -frustum, 0.1, 1000]"
+      :zoom="zoom"
+      :near="near"
+      :far="far"
     />
     <TresGridHelper />
     <TresMesh position-y="1">

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

@@ -12,14 +12,16 @@ const aspect = computed(() => width.value / height.value)
 
 const frustumSize = 10
 const orthographicCamera = new OrthographicCamera(
-  -frustumSize * aspect.value,
-  frustumSize * aspect.value,
-  frustumSize,
-  -frustumSize,
+  -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)

src/composables/useCamera/index.ts

@@ -2,16 +2,14 @@ import type { TresContext } from '../useTresContextProvider'
 
 import type { ComputedRef, Ref } from 'vue'
 import { computed, ref, watchEffect } from 'vue'
-import { isOrthographicCamera, isPerspectiveCamera } from '../../utils/is'
+import { isPerspectiveCamera } from '../../utils/is'
 import type { Camera } from 'three'
 
 /**
  * Interface for the return value of the useCamera composable
  */
 export interface UseCameraReturn {
-  /**
-   * The active camera
-   */
+
   activeCamera: ComputedRef<Camera | undefined>
   /**
    * The list of cameras
@@ -104,23 +102,10 @@ export const useCameraManager = ({ sizes }: UseCameraParams): UseCameraReturn =>
   watchEffect(() => {
     if (sizes.aspectRatio.value) {
       cameras.value.forEach((camera: Camera) => {
-        // Update perspective camera
         if (isPerspectiveCamera(camera)) {
           camera.aspect = sizes.aspectRatio.value
           camera.updateProjectionMatrix()
         }
-        // Update orthographic camera
-        /* else if (isOrthographicCamera(camera)) {
-          const frustumSize = 10
-          const aspect = sizes.aspectRatio.value
-
-          camera.left = frustumSize * aspect / -2
-          camera.right = frustumSize * aspect / 2
-          camera.top = frustumSize / 2
-          camera.bottom = frustumSize / -2
-
-          camera.updateProjectionMatrix()
-        } */
       })
     }
   })

src/core/nodeOps.ts

@@ -292,10 +292,31 @@ export const nodeOps: (context: TresContext) => RendererOptions<TresObject, Tres
         && prevArgs.length
         && !deepArrayEqual(prevArgs, args)
       ) {
-        root = Object.assign(
-          prevNode,
-          new catalogue.value[instanceName](...nextValue),
-        )
+        // Create a new instance
+        const newInstance = new catalogue.value[instanceName](...nextValue)
+
+        // Get all property descriptors of the new instance
+        const descriptors = Object.getOwnPropertyDescriptors(newInstance)
+
+        // Only copy properties that are not readonly
+        Object.entries(descriptors).forEach(([key, descriptor]) => {
+          if (!descriptor.writable && !descriptor.set) {
+            return // Skip readonly properties
+          }
+
+          // Copy the value from new instance to previous node
+          if (key in prevNode) {
+            try {
+              (prevNode as unknown as Record<string, unknown>)[key] = newInstance[key]
+            }
+            catch (e) {
+              // Skip if property can't be set
+              console.warn(`Could not set property ${key} on ${instanceName}:`, e)
+            }
+          }
+        })
+
+        root = prevNode
       }
       return
     }