theatre/r3f: Allow physical lighting in snapshot viewport (#114)

Co-authored-by: Andrew Prifer <andrew.prifer@gmail.com>

packages/r3f/src/components/DragDetector.tsx

@@ -1,6 +1,4 @@
-import type {
-  FC,
-  ReactNode} from 'react';
+import type {FC, ReactNode} from 'react'
 import React, {
   createContext,
   useContext,

packages/r3f/src/components/SnapshotEditor.tsx

@@ -1,6 +1,6 @@
-import {useCallback, useLayoutEffect, useMemo} from 'react'
+import {useCallback, useEffect, useLayoutEffect, useMemo} from 'react'
 import React from 'react'
-import {Canvas} from '@react-three/fiber'
+import {Canvas, useThree} from '@react-three/fiber'
 import type {BaseSheetObjectType} from '../store'
 import {allRegisteredObjects, useEditorStore} from '../store'
 import shallow from 'zustand/shallow'
@@ -42,6 +42,11 @@ const EditorScene: React.FC<{snapshotEditorSheet: ISheet; paneId: string}> = ({
   snapshotEditorSheet,
   paneId,
 }) => {
+  const [gl, scene, camera] = useThree(
+    (store) => [store.gl, store.scene, store.camera] as const,
+    shallow,
+  )
+
   const [editorCamera, orbitControlsRef] = useSnapshotEditorCamera(
     snapshotEditorSheet,
     paneId,
@@ -49,6 +54,16 @@ const EditorScene: React.FC<{snapshotEditorSheet: ISheet; paneId: string}> = ({
 
   const editorObject = getEditorSheetObject()
 
+  const viewportLighting =
+    useVal(editorObject?.props.viewport.lighting) ?? 'physical'
+
+  useEffect(() => {
+    if (gl && scene && camera) {
+      gl.physicallyCorrectLights = viewportLighting === 'physical'
+      gl.compile(scene, camera)
+    }
+  }, [gl, viewportLighting, scene, camera])
+
   const helpersRoot = useEditorStore((state) => state.helpersRoot, shallow)
 
   const showGrid = useVal(editorObject?.props.viewport.showGrid) ?? true
@@ -182,14 +197,11 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
                 <>
                   <CanvasWrapper>
                     <Canvas
-                      // @ts-ignore
-                      colorManagement
                       onCreated={({gl}) => {
                         gl.setClearColor('white')
                       }}
-                      shadowMap
+                      shadows
                       dpr={[1, 2]}
-                      fog={'red'}
                       frameloop="demand"
                       onPointerMissed={onPointerMissed}
                     >

packages/r3f/src/components/TooltipPortalProvider.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type {ReactNode} from 'react'
 import React, {useState} from 'react'
 import {PortalContext} from 'reakit'
 import styled from 'styled-components'

packages/r3f/src/components/editorStuff.ts

@@ -25,6 +25,14 @@ const editorSheetObjectConfig = {
       showReferenceWindow: types.boolean(true, {
         label: 'Reference',
       }),
+      lighting: types.stringLiteral(
+        'physical',
+        {
+          physical: 'Physical',
+          legacy: 'Legacy',
+        },
+        {as: 'menu', label: 'Lighting'},
+      ),
     },
     {label: 'Viewport Config'},
   ),

packages/r3f/src/components/useSnapshotEditorCamera.tsx

@@ -4,7 +4,7 @@ import type {MutableRefObject} from 'react'
 import {useLayoutEffect, useRef} from 'react'
 import React from 'react'
 import useRefAndState from './useRefAndState'
-import type {IScrub} from '@theatre/studio';
+import type {IScrub} from '@theatre/studio'
 import studio from '@theatre/studio'
 import type {PerspectiveCamera as PerspectiveCameraImpl} from 'three'
 import type {ISheet} from '@theatre/core'

theatre/core/src/sheets/Sheet.ts

@@ -21,8 +21,7 @@ type SheetObjectMap = StrictRecord<ObjectAddressKey, SheetObject>
 export type ObjectNativeObject = unknown
 
 export default class Sheet {
-  private readonly _objects: Atom<SheetObjectMap> =
-    new Atom<SheetObjectMap>({})
+  private readonly _objects: Atom<SheetObjectMap> = new Atom<SheetObjectMap>({})
   private _sequence: undefined | Sequence
   readonly address: SheetAddress
   readonly publicApi: TheatreSheet