More docs and annotations

packages/playground/devEnv/servePlayground.ts

@@ -14,7 +14,12 @@ require('esbuild')
     {
       entryPoints: [path.join(playgroundDir, 'src/index.tsx')],
       target: ['firefox88'],
-      loader: {'.png': 'file', '.glb': 'file', '.svg': 'dataurl'},
+      loader: {
+        '.png': 'file',
+        '.glb': 'file',
+        '.gltf': 'file',
+        '.svg': 'dataurl',
+      },
       bundle: true,
       sourcemap: true,
       define: definedGlobals,

packages/playground/src/dom/Scene.tsx

@@ -3,6 +3,7 @@ import type {UseDragOpts} from './useDrag'
 import useDrag from './useDrag'
 import React, {useLayoutEffect, useMemo, useState} from 'react'
 import type {IProject, ISheet} from '@theatre/core'
+import {onChange} from '@theatre/core'
 import type {IScrub, IStudio} from '@theatre/studio'
 
 studio.initialize()
@@ -25,7 +26,7 @@ const Box: React.FC<{
   const [pos, setPos] = useState<{x: number; y: number}>({x: 0, y: 0})
 
   useLayoutEffect(() => {
-    const unsubscribeFromChanges = obj.onValuesChange((newValues) => {
+    const unsubscribeFromChanges = onChange(obj.props, (newValues) => {
       setPos(newValues)
     })
     return unsubscribeFromChanges

packages/playground/src/playground-globals.d.ts

@@ -5,3 +5,7 @@ declare module '*.png' {
 declare module '*.glb' {
   export default string
 }
+
+declare module '*.gltf' {
+  export default string
+}

packages/r3f/src/components/ProxyManager.tsx

@@ -218,6 +218,10 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
     })
   }, [viewportShading, renderMaterials, sceneProxy])
 
+  const scrub = useMemo(() => {
+    return studio.debouncedScrub(1000)
+  }, [selected, editableProxyOfSelected])
+
   if (!sceneProxy) {
     return null
   }
@@ -235,7 +239,7 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
             const sheetObject = editableProxyOfSelected.sheetObject
             const obj = editableProxyOfSelected.object
 
-            studio.transaction(({set}) => {
+            scrub.capture(({set}) => {
               set(sheetObject.props, {
                 position: {
                   x: obj.position.x,

packages/r3f/src/components/RefreshSnapshot.tsx

@@ -8,7 +8,7 @@ import useRefreshSnapshot from './useRefreshSnapshot'
  * Alternatively you can use
  * @link useRefreshSnapshot()
  *
- * @example
+ * Usage
  * ```jsx
  * <Suspense fallback={null}>
  *  <RefreshSnapshot />

packages/r3f/src/components/useRefAndState.ts

@@ -4,8 +4,8 @@ import {useMemo, useState} from 'react'
 /**
  * Combines useRef() and useState().
  *
- * @example
- * ```typescript
+ * Usage:
+ * ```ts
  * const [ref, val] = useRefAndState<HTMLDivElement | null>(null)
  *
  * useEffect(() => {