fix(core): made v-if work again (#409)

* fix: made v-if work again

---------

Co-authored-by: Tino Koch <tinoooo@users.noreply.github.com>
Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>

CHANGELOG.md

@@ -1,5 +1,17 @@
 
 
+## [3.3.0-next.0](https://github.com/Tresjs/tres/compare/3.2.3...3.3.0-next.0) (2023-09-29)
+
+
+### Features
+
+* context (TresContext) is now exposed from TresCanvas ([#404](https://github.com/Tresjs/tres/issues/404)) ([838d779](https://github.com/Tresjs/tres/commit/838d779e59494cacf61274fe497373983dbe8278))
+
+
+### Bug Fixes
+
+* made v-if work again ([277e901](https://github.com/Tresjs/tres/commit/277e901f8e41dc72bf755db17c584b3e28086347))
+
 ## [3.2.3](https://github.com/Tresjs/tres/compare/3.2.2...3.2.3) (2023-09-22)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "3.2.3",
+  "version": "3.3.0-next.0",
   "packageManager": "pnpm@8.3.1",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",

playground/src/pages/TheBasic.vue

@@ -28,9 +28,15 @@ function onPointerEnter(ev) {
     ev.object.material.color.set('#DFFF45')
   }
 }
+
+const sphereExists = ref(true)
 </script>
 
 <template>
+  <input
+    v-model="sphereExists"
+    type="checkbox"
+  >
   <TresCanvas v-bind="state">
     <TresPerspectiveCamera
       :position="[5, 5, 5]"
@@ -42,15 +48,19 @@ function onPointerEnter(ev) {
     <OrbitControls />
     <TresAmbientLight :intensity="0.5" />
 
-    <TresMesh
-      ref="sphereRef"
-      :position="[0, 4, 0]"
-      cast-shadow
-      @pointer-enter="onPointerEnter"
-    >
-      <TresSphereGeometry :args="[2, 32, 32]" />
-      <TresMeshToonMaterial color="teal" />
-    </TresMesh>
+    <TresGroup>
+      <TresMesh
+        ref="sphereRef"
+        :visible="sphereExists"
+        :user-data="{ debug: true }"
+        :position="[0, 4, 0]"
+        cast-shadow
+        @pointer-enter="onPointerEnter"
+      >
+        <TresSphereGeometry :args="[2, 32, 32]" />
+        <TresMeshToonMaterial color="teal" />
+      </TresMesh>
+    </TresGroup>
 
     <TresDirectionalLight
       :position="[0, 8, 4]"

src/core/nodeOps.ts

@@ -12,7 +12,6 @@ function noop(fn: string): any {
   fn
 }
 
-let fallback: TresObject | null = null
 let scene: TresScene | null = null
 
 const { logError } = useLogger()
@@ -76,20 +75,8 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
   },
   insert(child, parent) {
     if (parent && parent.isScene) scene = parent as unknown as TresScene
-    if (
-      (child?.__vnode?.type === 'TresGroup' || child?.__vnode?.type === 'TresObject3D')
-      && parent === null
-      && !child?.__vnode?.ctx?.asyncResolved
-    ) {
-      fallback = child
-      return
-    }
-    else if (parent === null 
-      && (child?.__vnode?.type.includes('Controls') || child?.__vnode?.type.includes('Helper'))) {
-      fallback = scene as unknown as TresObject
-    }
-
-    if (!parent) parent = fallback as TresObject
+    
+    const parentObject = parent || scene
 
     if (child?.isObject3D) {
       if (child?.isCamera) {
@@ -112,17 +99,17 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
       }
     }
 
-    if (child?.isObject3D && parent?.isObject3D) {
-      parent.add(child)
+    if (child?.isObject3D && parentObject?.isObject3D) {
+      parentObject.add(child)
       child.dispatchEvent({ type: 'added' })
     }
     else if (child?.isFog) {
-      parent.fog = child
+      parentObject.fog = child
     }
     else if (typeof child?.attach === 'string') {
-      child.__previousAttach = child[parent?.attach as string]
-      if (parent) {
-        parent[child.attach] = child
+      child.__previousAttach = child[parentObject?.attach as string]
+      if (parentObject) {
+        parentObject[child.attach] = child
       }
     }
   },