diff --git a/packages/r3f/src/components/DragDetector.tsx b/packages/r3f/src/components/DragDetector.tsx index d4a56be..313fd88 100644 --- a/packages/r3f/src/components/DragDetector.tsx +++ b/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, diff --git a/packages/r3f/src/components/SnapshotEditor.tsx b/packages/r3f/src/components/SnapshotEditor.tsx index a3277d9..32f3882 100644 --- a/packages/r3f/src/components/SnapshotEditor.tsx +++ b/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) => { <> { gl.setClearColor('white') }} - shadowMap + shadows dpr={[1, 2]} - fog={'red'} frameloop="demand" onPointerMissed={onPointerMissed} > diff --git a/packages/r3f/src/components/TooltipPortalProvider.tsx b/packages/r3f/src/components/TooltipPortalProvider.tsx index 0955e50..c7edd62 100644 --- a/packages/r3f/src/components/TooltipPortalProvider.tsx +++ b/packages/r3f/src/components/TooltipPortalProvider.tsx @@ -1,5 +1,5 @@ -import type {ReactNode} from 'react'; -import React, { useState} from 'react' +import type {ReactNode} from 'react' +import React, {useState} from 'react' import {PortalContext} from 'reakit' import styled from 'styled-components' diff --git a/packages/r3f/src/components/editorStuff.ts b/packages/r3f/src/components/editorStuff.ts index 9fb4155..d235598 100644 --- a/packages/r3f/src/components/editorStuff.ts +++ b/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'}, ), diff --git a/packages/r3f/src/components/useSnapshotEditorCamera.tsx b/packages/r3f/src/components/useSnapshotEditorCamera.tsx index a26c88c..a413e71 100644 --- a/packages/r3f/src/components/useSnapshotEditorCamera.tsx +++ b/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' diff --git a/theatre/core/src/sheets/Sheet.ts b/theatre/core/src/sheets/Sheet.ts index c6a0c6f..54158d5 100644 --- a/theatre/core/src/sheets/Sheet.ts +++ b/theatre/core/src/sheets/Sheet.ts @@ -21,8 +21,7 @@ type SheetObjectMap = StrictRecord export type ObjectNativeObject = unknown export default class Sheet { - private readonly _objects: Atom = - new Atom({}) + private readonly _objects: Atom = new Atom({}) private _sequence: undefined | Sequence readonly address: SheetAddress readonly publicApi: TheatreSheet