onBeforeRender from component

[klevron]

Actually it is not so easy to modify render loop from a component...
We could use the same design pattern as in R3F (or something similar) : the useFrame hook
Open to suggestions :)

[TheDutchCoder]

I'm using a composable for this:

import { ref } from 'vue'

const rendererRef = ref()

export default function useRenderer () {
  return {
    rendererRef,
  }
}

in App.vue:

<template>
  <Renderer ref="rendererRef">
  <!-- etc -->
  </Renderer>
</template>

<script setup>
const { rendererRef } = useRenderer() // initializes the renderer
</script>

In a component:

import useRenderer from '#composables/use-renderer'

onMounted(() => {
  const { rendererRef } = useRenderer()

  rendererRef.value.onBeforeRender(() => {
    // logic
  })
})