[v4] - Animations with onLoop doesn't trigger on-demand rendering

[alvarosabu]

[v4] - Animations with onLoop doesn't trigger on-demand rendering

[andretchen0]

Per #140 , on-demand works through Vue renderer prop patching.

In your example, you're bypassing the Vue renderer and modifying the position directly:

sphereRef.value.position.x += Math.sin(elapsed) * 0.01

If instead you do this, things work as expected:

<script setup lang="ts">
import { TresCanvas, useRenderLoop } from '@tresjs/core'
import BlenderCube from '../../components/BlenderCube.vue'
import GraphPane from '../../components/GraphPane.vue'
import RenderingLogger from '../../components/RenderingLogger.vue'

const { onLoop } = useRenderLoop()
const x = shallowRef(0)
onLoop(({ elapsed }) => {
  x.value = Math.sin(elapsed)
})
</script>

<template>
  <GraphPane />
  <TresCanvas
    render-mode="on-demand"
    clear-color="#82DBC5"
    @render="onRender"
  >
    <TresPerspectiveCamera
      :position="[5, 5, 5]"
      :look-at="[0, 0, 0]"
    />
    <Suspense>
      <BlenderCube :position-x="x" />
    </Suspense>
    <TresGridHelper />
    <RenderingLogger />
    <TresAmbientLight :intensity="1" />
    <TresDirectionalLight
      :position="[0, 8, 4]"
      :intensity="0.7"
    />
  </TresCanvas>
</template>

[alvarosabu]

Hey @andretchen0 , yes, it will work with patch props because of the invalidate function we have inside. However, for performance reasons, we recommend always editing the template ref.

If so, user would need to manually invalidate like this:

const { invalidate } = useTres()

useLoop(({ elapsed }) => {
  if (!sphereRef.value) { return }
  sphereRef.value.position.y += Math.sin(elapsed) * 0.01
  invalidate()
})

Similar to R3F https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#triggering-manual-frames

I will add this to the documentation.