feat: add disable render prop for postprocessing

docs/api/renderer.md

@@ -82,6 +82,7 @@ renderer.shadowMap.type: PCFSoftShadowMap
 | **preserveDrawingBuffer**   | Whether to preserve the buffers until manually cleared or overwritten..                                                                                         | `false`            |
 | **clearColor**              | The color the renderer will use to clear the canvas.                                                                                                            | `#000000`          |
 | **windowSize**              | Whether to use the window size as the canvas size or the parent element.                                                                                        | `false`            |
+| **disableRender**           | Disable render on requestAnimationFrame, usefull for PostProcessing                                                                                             | `false`            |
 
 ## Defaults
 

src/components/TresCanvas.ts

@@ -18,6 +18,7 @@ export interface TresCanvasProps {
   clearColor?: string
   windowSize?: boolean
   preset?: RendererPresetsType
+  disableRender?: boolean
 }
 /**
  * Vue component for rendering a Tres component.
@@ -39,6 +40,7 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
     'clearColor',
     'windowSize',
     'preset',
+    'disableRender',
   ] as unknown as undefined,
   setup(props, { slots, expose }) {
     const tres = useTresProvider()

src/components/TresScene.ts

@@ -23,6 +23,7 @@ export interface TresSceneProps {
   clearColor?: string
   windowSize?: boolean
   preset?: RendererPresetsType
+  disableRender?: boolean
 }
 /**
  * Vue component for rendering a Tres component.
@@ -46,6 +47,7 @@ export const TresScene = defineComponent<TresSceneProps>({
     'clearColor',
     'windowSize',
     'preset',
+    'disableRender',
   ] as unknown as undefined,
   setup(props, { slots, expose }) {
     if (props.physicallyCorrectLights === true) {
@@ -89,7 +91,7 @@ export const TresScene = defineComponent<TresSceneProps>({
       })
 
       onLoop(() => {
-        if (activeCamera.value) renderer.value?.render(scene, activeCamera.value)
+        if (activeCamera.value && props.disableRender === true) renderer.value?.render(scene, activeCamera.value)
 
         if (raycaster.value) {
           const intersects = raycaster.value.intersectObjects(scene.children)