moved stuff to useRenderer

src/composables/useRenderer/index.ts

@@ -1,5 +1,28 @@
-import { useTresContext } from '../../composables'
+import type { TresCanvasProps } from 'src/components/TresCanvas.vue'
+import { createRenderer } from 'src/core/createRenderer'
+import type { TresRendererSetupContext } from '../../composables'
+import { WebGLRenderer } from 'three'
+import { setupWebGLRenderer } from 'src/core/setupRenderer'
+import { onUnmounted } from 'vue'
 
-export function useRenderer() {
-  return useTresContext().renderer
+export async function useRenderer({
+  contextParts: ctx,
+  options,
+}: {
+  contextParts: TresRendererSetupContext
+  options: TresCanvasProps
+}) {
+  const renderer = await createRenderer(ctx, options)
+
+  // For now we only support WebGLRenderer. If the user wants to use their own renderer, it is their responsibility to handle the disposal and stuff like that.
+  if (renderer instanceof WebGLRenderer) {
+    setupWebGLRenderer(renderer, options, ctx) // TODO use contents directly
+
+    onUnmounted(() => {
+      renderer.dispose()
+      renderer.forceContextLoss()
+    })
+  }
+
+  return renderer
 }

src/composables/useTresContextProvider/index.ts

@@ -1,11 +1,10 @@
 import type { Camera } from 'three'
 import { Raycaster, WebGLRenderer } from 'three'
-import type { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
+import type { ComputedRef, DeepReadonly, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
 import type { RendererLoop } from '../../core/loop'
 import type { EmitEventFn, Renderer, TresControl, TresObject, TresScene } from '../../types'
 
 import { computed, inject, onUnmounted, provide, readonly, ref, shallowRef } from 'vue'
-import { extend } from '../../core/catalogue'
 import { createRenderLoop } from '../../core/loop'
 
 import { useCamera } from '../useCamera'
@@ -16,6 +15,7 @@ import { createRenderer } from '../../core/createRenderer'
 import { setupWebGLRenderer } from '../../core/setupRenderer'
 import type { TresCanvasProps } from '../../components/TresCanvas.vue'
 import { setupDevtools } from '../../devtools/setupDevtools'
+import { useRenderer } from '../useRenderer'
 
 export interface InternalState {
   priority: Ref<number>
@@ -137,21 +137,17 @@ export async function useTresContextProvider({
   }
 
   // Renderer
-  const renderer = await createRenderer({
-    sizes,
-    scene: localScene,
-    camera,
-    canvas,
-    invalidate,
-    advance,
-  }, rendererOptions)
-
-  // Only setup the renderer with Canvas props if it is a WebGLRenderer
-  if (renderer instanceof WebGLRenderer) {
-    setupWebGLRenderer(renderer, rendererOptions, {
-
-    })
-  }
+  const renderer = await useRenderer({
+    contextParts: {
+      sizes,
+      scene: localScene,
+      camera,
+      canvas,
+      advance,
+      invalidate,
+    },
+    options: rendererOptions,
+  })
 
   const ctx: TresContext = {
     sizes,
@@ -221,10 +217,6 @@ export async function useTresContextProvider({
   })
 
   onUnmounted(() => {
-    if (ctx.renderer.value) {
-      ctx.renderer.value.dispose()
-      ctx.renderer.value.forceContextLoss()
-    }
     cancelTresReady()
     ctx.loop.stop()
   })

src/core/createRenderer.ts

@@ -5,7 +5,10 @@ import type { TresCanvasProps } from '../components/TresCanvas.vue'
 import { toValue } from 'vue'
 import { isObject } from '../utils/is'
 
-export async function createRenderer(ctx: TresRendererSetupContext, options: TresCanvasProps): Promise<TresRenderer> {
+export async function createRenderer(
+  ctx: TresRendererSetupContext,
+  options: TresCanvasProps, // TODO could be less maybe?
+): Promise<TresRenderer> {
   if (options.renderer) {
     const fnOrRenderer = options.renderer
     if (typeof fnOrRenderer === 'function') {