From d85e3053af11095df1bc02d8605823193b82af74 Mon Sep 17 00:00:00 2001
From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com>
Date: Sun, 1 May 2022 14:59:52 +0200
Subject: [PATCH] Fix r3f example not actually making the editable camera
 defined in the scene the defaul (#78)

* Fix e.perspectiveCamera -> editable(PerspectiveCamera)

* Also fix the one in the examples directory

* Update fix to latest version
---
 .../playground/src/shared/r3f-rocket/App.tsx  | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/playground/src/shared/r3f-rocket/App.tsx b/packages/playground/src/shared/r3f-rocket/App.tsx
index 8a6420c..e8cb0e7 100644
--- a/packages/playground/src/shared/r3f-rocket/App.tsx
+++ b/packages/playground/src/shared/r3f-rocket/App.tsx
@@ -3,18 +3,13 @@ import {OrbitControls, Stars} from '@react-three/drei'
 import {getProject} from '@theatre/core'
 import React, {Suspense, useState} from 'react'
 import {Canvas} from '@react-three/fiber'
-import {useGLTF} from '@react-three/drei'
+import {useGLTF, PerspectiveCamera} from '@react-three/drei'
 import sceneGLB from './scene.glb'
 
 document.body.style.backgroundColor = '#171717'
 
-/*
-Auto-generated by: https://github.com/pmndrs/gltfjsx
-author: overlaps (https://sketchfab.com/overlaps)
-license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
-source: https://sketchfab.com/models/91964c1ce1a34c3985b6257441efa500
-title: Space exploration [WLP series #8]
-*/
+const EditableCamera = e(PerspectiveCamera, 'perspectiveCamera')
+
 function Model({url}: {url: string}) {
   const {nodes} = useGLTF(url) as any
 
@@ -54,15 +49,17 @@ function App() {
       onClick={() => {
         // return setBgIndex((bgIndex) => (bgIndex + 1) % bgs.length)
       }}
+      style={{
+        height: '100vh',
+      }}
     >
       <Canvas dpr={[1.5, 2]} linear shadows frameloop="demand">
         <SheetProvider getSheet={() => getProject('Space').sheet('Scene')}>
           <fog attach="fog" args={[bg, 16, 30]} />
           <color attach="background" args={[bg]} />
           <ambientLight intensity={0.75} />
-          <e.perspectiveCamera
+          <EditableCamera
             uniqueName="Camera"
-            // @ts-ignore
             makeDefault
             position={[0, 0, 16]}
             fov={75}
@@ -82,7 +79,8 @@ function App() {
               shadow-mapSize={[1024, 1024]}
               shadow-bias={-0.0001}
             />
-          </e.perspectiveCamera>
+            <e.directionalLight uniqueName="Light 3" />
+          </EditableCamera>
           <Suspense fallback={null}>
             <RefreshSnapshot />
             <Model url={sceneGLB} />