WIP: Getting r3f to work with create-react-app

* Temporarily disabled ESM bundles because the current setup confuses webpack4 (but not parceljs). Since create-react-app uses webpack4, not doing this would make theatre incompatible with CRA.

packages/playground/src/r3f/App.tsx

@@ -1,5 +1,4 @@
 import {editable as e, Wrapper} from '@theatre/plugin-r3f'
-import {PerspectiveCamera} from '@react-three/drei'
 import {getProject} from '@theatre/core'
 import * as THREE from 'three'
 import React, {useState, useEffect, useRef} from 'react'
@@ -7,9 +6,6 @@ import type {Color} from '@react-three/fiber'
 import {Canvas, useFrame} from '@react-three/fiber'
 import {softShadows, Shadow} from '@react-three/drei'
 import type {DirectionalLight} from 'three'
-import type {$FixMe} from '../../../plugin-r3f/src/types'
-
-const ECamera = e(PerspectiveCamera, 'perspectiveCamera')
 
 // Soft shadows are expensive, comment and refresh when it's too slow
 softShadows()
@@ -29,11 +25,7 @@ function Button() {
   useFrame((state) => {
     const step = 0.1
     const camera = state.camera as THREE.PerspectiveCamera
-    camera.fov = (THREE as $FixMe).MathUtils.lerp(
-      camera.fov,
-      zoom ? 10 : 42,
-      step,
-    )
+    camera.fov = (THREE as any).MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
     camera.position.lerp(
       vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
       step,
@@ -99,9 +91,10 @@ function App() {
         shadowMap
       >
         <Wrapper
-          getSheet={() => getProject('Example project').sheet('R3F-Canvas')}
+          getSheet={() => getProject('Playground - R3F').sheet('R3F-Canvas')}
         >
-          <ECamera makeDefault uniqueName="Camera" />
+          {/* @ts-ignore */}
+          <e.perspectiveCamera makeDefault uniqueName="Camera" />
           <ambientLight intensity={0.4} />
           <e.pointLight
             position={[-10, -10, 5]}

packages/playground/src/space-exploration/App.tsx

@@ -49,7 +49,7 @@ function App() {
   const bg = '#272730'
   return (
     <div>
-      <Canvas dpr={[1.5, 2]} linear shadows>
+      <Canvas dpr={[1.5, 2]} linear shadows frameloop="demand">
         <Wrapper
           getSheet={() => getProject('Example project').sheet('R3F-Canvas')}
         >