feat: add disable render prop for postprocessing

Tresjs · Apr 17, 2023 · b2fd557 · b2fd557
1 parent b354e87
commit b2fd557
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/docs/api/renderer.md b/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
 

diff --git a/src/components/TresCanvas.ts b/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()

diff --git a/src/components/TresScene.ts b/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)