Made plugin-r3f render on demand

packages/plugin-r3f/src/components/ProxyManager.tsx

@@ -19,6 +19,7 @@ import type {ISheetObject} from '@theatre/core'
 import type {$FixMe} from '../types'
 import {useSelected} from './useSelected'
 import {useVal} from '@theatre/dataverse-react'
+import useInvalidate from './useInvalidate'
 
 export interface ProxyManagerProps {
   orbitControlsRef: React.MutableRefObject<OrbitControls | null>
@@ -52,6 +53,8 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
     }
   >({})
 
+  const invalidate = useInvalidate()
+
   // set up scene proxies
   useLayoutEffect(() => {
     if (!sceneProxy) {
@@ -108,6 +111,7 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
         newValues.rotation.z,
       )
       object.scale.set(newValues.scale.x, newValues.scale.y, newValues.scale.z)
+      invalidate()
     }
 
     setFromTheatre(sheetObject.value)

packages/plugin-r3f/src/components/SnapshotEditor.tsx

@@ -159,6 +159,7 @@ const SnapshotEditor: React.FC<{object: ISheetObject<$FixMe>; paneId: string}> =
                       shadowMap
                       dpr={[1, 2]}
                       fog={'red'}
+                      frameloop="demand"
                       onPointerMissed={onPointerMissed}
                     >
                       <EditorScene

packages/plugin-r3f/src/components/editable.tsx

@@ -16,6 +16,7 @@ import {useEditorStore} from '../store'
 import mergeRefs from 'react-merge-refs'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import type {ISheetObject} from '@theatre/core'
+import useInvalidate from './useInvalidate'
 
 interface Elements {
   group: Group
@@ -54,6 +55,8 @@ const editable = <
         undefined | ISheetObject<$FixMe>
       >(undefined)
 
+      const invalidate = useInvalidate()
+
       useLayoutEffect(() => {
         if (!sheet) return
         const sheetObject = sheet.object(uniqueName, {}, baseSheetObjectType)
@@ -153,6 +156,7 @@ const editable = <
             newValues.scale.y,
             newValues.scale.z,
           )
+          invalidate()
         }
 
         setFromTheatre(sheetObject.value)

packages/plugin-r3f/src/components/useInvalidate.ts

@@ -0,0 +1,5 @@
+import {useThree} from '@react-three/fiber'
+
+export default function useInvalidate() {
+  return useThree(({invalidate}) => invalidate)
+}