feat: add context to root on instances localstate

Author: alvarosabu

src/composables/useTresContextProvider/index.ts

@@ -9,6 +9,7 @@ import type { UseRendererOptions } from '../useRenderer'
 import { useRenderer } from '../useRenderer'
 import { extend } from '../../core/catalogue'
 import { useLogger } from '../useLogger'
+import type { TresScene } from '../../types'
 
 export interface InternalState {
   priority: Ref<number>
@@ -43,7 +44,7 @@ export interface PerformanceState {
 }
 
 export interface TresContext {
-  scene: ShallowRef<Scene>
+  scene: ShallowRef<TresScene>
   sizes: { height: Ref<number>; width: Ref<number>; aspectRatio: ComputedRef<number> }
   extend: (objects: any) => void
   camera: ComputedRef<Camera | undefined>
@@ -74,7 +75,7 @@ export function useTresContextProvider({
   rendererOptions,
   emit,
 }: {
-  scene: Scene
+  scene: TresScene
   canvas: MaybeRef<HTMLCanvasElement>
   windowSize: MaybeRefOrGetter<boolean>
   disableRender: MaybeRefOrGetter<boolean>
@@ -109,7 +110,7 @@ export function useTresContextProvider({
     width: computed(() => debouncedReactiveSize.value.width),
     aspectRatio,
   }
-  const localScene = shallowRef<Scene>(scene)
+  const localScene = shallowRef<TresScene>(scene)
   const {
     camera,
     cameras,
@@ -189,8 +190,8 @@ export function useTresContextProvider({
 
   provide('useTres', ctx)
 
-  // Add context to scene.userData
-  ctx.scene.value.userData.tres__context = ctx
+  // Add context to scene local state
+  ctx.scene.value.__tres.root = ctx
 
   // Performance
   const updateInterval = 100 // Update interval in milliseconds

src/core/nodeOps.ts

@@ -98,7 +98,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject | null> = {
     if (parent && parent.isScene) {
       scene = parent as unknown as TresScene
       if (child) {
-        child.__tres.root = scene.userData.tres__context as TresContext
+        child.__tres.root = scene.__tres.root as TresContext
       }
     }
 

src/types/index.ts

@@ -3,6 +3,7 @@ import type { DefineComponent, VNode, VNodeRef } from 'vue'
 
 import type * as THREE from 'three'
 import type { EventProps as PointerEventHandlerEventProps } from '../composables/usePointerEventHandler'
+import type { TresContext } from '../composables/useTresContextProvider'
 
 // Based on React Three Fiber types by Pmndrs
 // https://github.com/pmndrs/react-three-fiber/blob/v9/packages/fiber/src/three-types.ts
@@ -63,6 +64,9 @@ export interface TresObject3D extends THREE.Object3D<THREE.Object3DEventMap> {
 export type TresObject = TresBaseObject & (TresObject3D | THREE.BufferGeometry | THREE.Material | THREE.Fog)
 
 export interface TresScene extends THREE.Scene {
+  __tres: {
+    root: TresContext
+  }
   userData: {
     // keys are prefixed with tres__ to avoid name collisions
     tres__registerCamera?: (newCamera: THREE.Camera, active?: boolean) => void