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
+}