diff --git a/packages/plugin-r3f/src/components/ProxyManager.tsx b/packages/plugin-r3f/src/components/ProxyManager.tsx index 9395e29..330180e 100644 --- a/packages/plugin-r3f/src/components/ProxyManager.tsx +++ b/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 @@ -52,6 +53,8 @@ const ProxyManager: VFC = ({orbitControlsRef}) => { } >({}) + const invalidate = useInvalidate() + // set up scene proxies useLayoutEffect(() => { if (!sceneProxy) { @@ -108,6 +111,7 @@ const ProxyManager: VFC = ({orbitControlsRef}) => { newValues.rotation.z, ) object.scale.set(newValues.scale.x, newValues.scale.y, newValues.scale.z) + invalidate() } setFromTheatre(sheetObject.value) diff --git a/packages/plugin-r3f/src/components/SnapshotEditor.tsx b/packages/plugin-r3f/src/components/SnapshotEditor.tsx index e415d53..7ad52c6 100644 --- a/packages/plugin-r3f/src/components/SnapshotEditor.tsx +++ b/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} > >(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) diff --git a/packages/plugin-r3f/src/components/useInvalidate.ts b/packages/plugin-r3f/src/components/useInvalidate.ts new file mode 100644 index 0000000..847e1f6 --- /dev/null +++ b/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) +}