refactor: update useRenderLoop to simplify parameters and improve type usage

src/composables/useRenderLoop/index.ts

@@ -1,8 +1,7 @@
-import type { UseRafFnOptions } from '@vueuse/core'
 import { createEventHook, useRafFn } from '@vueuse/core'
 import { Clock } from 'three'
 
-export interface RenderLoop {
+export interface ClockState {
   delta: number
   elapsed: number
   clock: Clock
@@ -14,16 +13,10 @@ const getRandomString = () => crypto?.randomUUID // check if method is available
   ? crypto.randomUUID()
   : Math.random().toString()
 
-export const useRenderLoop = ({
-  loopId = getRandomString(),
-  options,
-}: {
-  loopId?: string
-  options?: UseRafFnOptions
-} = {}) => {
-  const onBeforeLoop = createEventHook<RenderLoop>()
-  const onLoop = createEventHook<RenderLoop>()
-  const onAfterLoop = createEventHook<RenderLoop>()
+export const useRenderLoop = (loopId = getRandomString()) => {
+  const onBeforeLoop = createEventHook<ClockState>()
+  const onLoop = createEventHook<ClockState>()
+  const onAfterLoop = createEventHook<ClockState>()
 
   if (!clocksPerSceneUuid.has(loopId)) {
     clocksPerSceneUuid.set(loopId, new Clock())
@@ -45,7 +38,7 @@ export const useRenderLoop = ({
       onLoop.trigger({ delta, elapsed, clock })
       onAfterLoop.trigger({ delta, elapsed, clock })
     },
-    options,
+    { immediate: false },
   )
 
   return {

src/composables/useRenderer/useRendererManager.ts

@@ -176,7 +176,7 @@ export function useRendererManager(
 
   const onRender = createEventHook<WebGLRenderer>()
 
-  const { onLoop, resume } = useRenderLoop({ loopId: scene.uuid, options: { immediate: false } })
+  const { onLoop, resume } = useRenderLoop(scene.uuid)
 
   resume() // TODO resume when ready (take from other branch)
 

src/composables/useTresContextProvider/index.ts

@@ -1,12 +1,10 @@
 import type { Camera } from 'three'
 import type { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
-import type { RendererLoop } from '../../core/loop'
 import type { TresControl, TresObject, TresScene } from '../../types'
 import type { UseRendererManagerReturn, UseRendererOptions } from '../useRenderer/useRendererManager'
 import { Raycaster } from 'three'
 import { inject, onUnmounted, provide, readonly, ref, shallowRef } from 'vue'
 import { extend } from '../../core/catalogue'
-import { createRenderLoop } from '../../core/loop'
 
 import { useCamera } from '../useCamera'
 import { useRendererManager } from '../useRenderer/useRendererManager'
@@ -34,12 +32,10 @@ export interface TresContext {
   extend: (objects: any) => void
   camera: ComputedRef<Camera | undefined>
   cameras: DeepReadonly<Ref<Camera[]>>
-  controls: Ref<TresControl | null>
+  controls: Ref<TresControl | null> // TODO check why this is here.
   renderer: UseRendererManagerReturn
   raycaster: ShallowRef<Raycaster>
   perf: PerformanceState
-  // Loop
-  loop: RendererLoop
   // Camera
   registerCamera: (maybeCamera: unknown) => void
   setCameraActive: (cameraOrUuid: Camera | string) => void
@@ -77,8 +73,6 @@ export function useTresContextProvider({
     setCameraActive,
   } = useCamera({ sizes, scene })
 
-  const loop = createRenderLoop()
-
   const renderer = useRendererManager(
     {
       scene,
@@ -114,7 +108,6 @@ export function useTresContextProvider({
     registerCamera,
     setCameraActive,
     deregisterCamera,
-    loop,
     onReady: readyEventHook.on,
   }
 
@@ -127,18 +120,13 @@ export function useTresContextProvider({
 
   const { on: onTresReady, cancel: cancelTresReady } = useTresReady(ctx)!
 
-  ctx.loop.setReady(false)
-  ctx.loop.start()
-
   onTresReady(() => {
     readyEventHook.trigger(ctx)
-    ctx.loop.setReady(true)
     useTresEventManager(scene, ctx)
   })
 
   onUnmounted(() => {
     cancelTresReady()
-    ctx.loop.stop()
   })
 
   return ctx

src/core/loop.ts

@@ -5,16 +5,11 @@ import type { Callback } from '../utils/createPriorityEventHook'
 import { Clock, MathUtils } from 'three'
 import { ref, unref } from 'vue'
 import { createPriorityEventHook } from '../utils/createPriorityEventHook'
+import type { ClockState } from 'src/composables/useRenderLoop'
 
 export type LoopStage = 'before' | 'render' | 'after'
 
-export interface LoopCallback {
-  delta: number
-  elapsed: number
-  clock: Clock
-}
-
-export interface LoopCallbackWithCtx extends LoopCallback {
+export interface LoopCallbackWithCtx extends ClockState {
   camera: Camera
   scene: Scene
   renderer: WebGLRenderer