chore: trying to make the orbit controls re-instance

playground/src/components/DebugUI.vue

@@ -29,8 +29,8 @@ setTimeout(() => {
 
 <template>
   <TresCanvas v-bind="gl" :window-size="true">
-    <TresPerspectiveCamera :look-at="[0, 4, 0]" />
     <OrbitControls />
+    <TresPerspectiveCamera :look-at="[0, 4, 0]" />
     <TresMesh :position="[0, 1, 0]">
       <TresBoxGeometry :args="[boxWidth, 1, 1]" />
       <TresMeshToonMaterial color="teal" />

playground/src/components/MultipleCanvas.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
 // import { GLTFModel, OrbitControls } from '@tresjs/cientos'
 
 const state = reactive({
@@ -36,7 +37,7 @@ const log = () => {
     <div class="w-1/2 aspect-video">
       <TresCanvas v-bind="state">
         <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 4, 0]" />
-
+        <OrbitControls />
         <TresAmbientLight :intensity="0.5" />
         <TresMesh :position="[0, 4, 0]" @click="log">
           <TresBoxGeometry :args="[1, 1, 1]" />
@@ -51,6 +52,7 @@ const log = () => {
     </div>
     <div class="w-1/2 aspect-video">
       <TresCanvas v-bind="state2">
+        <OrbitControls />
         <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 4, 0]" />
         <TresAmbientLight :intensity="0.5" />
 

src/core/nodeOps.ts

@@ -67,6 +67,9 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
       if (props?.geometry?.isBufferGeometry) (instance as TresObject3D).userData.tres__geometryViaProp = true
     }
 
+    if (!instance.userData) instance.userData = {}
+    instance.userData.tres__name = name
+
     return instance
   },
   insert(child, parent) {
@@ -188,9 +191,10 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
         const prevNode = node as TresObject3D
         const prevArgs = _prevValue ?? []
         const args = nextValue ?? []
+        const instanceName = node.userData.tres__name || node.type
 
-        if (node.type && !deepArrayEqual(prevArgs, args)) {
-          root = Object.assign(prevNode, new catalogue.value[node.type](...nextValue))
+        if (instanceName && !deepArrayEqual(prevArgs, args)) {
+          root = Object.assign(prevNode, new catalogue.value[instanceName](...nextValue))
         }
         return
       }