From 08a064eda697d2832a947842e0bd41c5e89705f9 Mon Sep 17 00:00:00 2001 From: Don McCurdy Date: Wed, 30 Mar 2022 10:59:53 -0400 Subject: [PATCH 1/2] Add support for physical lighting in snapshot viewport. --- .../r3f/src/components/SnapshotEditor.tsx | 21 +++++++++++++++++-- packages/r3f/src/components/editorStuff.ts | 8 +++++++ 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/packages/r3f/src/components/SnapshotEditor.tsx b/packages/r3f/src/components/SnapshotEditor.tsx index 02bb35003..0905063cd 100644 --- a/packages/r3f/src/components/SnapshotEditor.tsx +++ b/packages/r3f/src/components/SnapshotEditor.tsx @@ -1,4 +1,4 @@ -import {useCallback, useLayoutEffect, useMemo} from 'react' +import {useCallback, useEffect, useLayoutEffect, useMemo, useState} from 'react' import React from 'react' import {Canvas} from '@react-three/fiber' import type {BaseSheetObjectType} from '../store' @@ -15,6 +15,7 @@ import useSnapshotEditorCamera from './useSnapshotEditorCamera' import {getEditorSheet, getEditorSheetObject} from './editorStuff' import type {$IntentionalAny} from '@theatre/shared/utils/types' import {InfiniteGridHelper} from '../InfiniteGridHelper' +import type {Camera, Scene, WebGLRenderer} from 'three' const GlobalStyle = createGlobalStyle` :host { @@ -105,6 +106,12 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => { const snapshotEditorSheet = getEditorSheet() const paneId = props.paneId const editorObject = getEditorSheetObject() + const [gl, setGL] = useState() + const [scene, setScene] = useState() + const [camera, setCamera] = useState() + + const viewportLighting = + useVal(editorObject?.props.viewport.lighting) ?? 'physical' const [sceneSnapshot, createSnapshot] = useEditorStore( (state) => [state.sceneSnapshot, state.createSnapshot], @@ -126,6 +133,13 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => { } }, [editorOpen]) + useEffect(() => { + if (gl && scene && camera) { + gl.physicallyCorrectLights = viewportLighting === 'physical' + gl.compile(scene, camera) + } + }, [gl, viewportLighting]) + const onPointerMissed = useCallback(() => { // This callback runs when the user clicks in an empty space inside a SnapshotEditor. // We'll try to set the current selection to the nearest sheet _if_ at least one object @@ -165,8 +179,11 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => { { + onCreated={({gl, scene, camera}) => { gl.setClearColor('white') + setGL(gl) + setScene(scene) + setCamera(camera) }} shadowMap dpr={[1, 2]} diff --git a/packages/r3f/src/components/editorStuff.ts b/packages/r3f/src/components/editorStuff.ts index a039679e5..7dfd0ed1b 100644 --- a/packages/r3f/src/components/editorStuff.ts +++ b/packages/r3f/src/components/editorStuff.ts @@ -22,6 +22,14 @@ const editorSheetObjectConfig = { }, {as: 'menu', label: 'Shading'}, ), + lighting: types.stringLiteral( + 'physical', + { + physical: 'Physical', + legacy: 'Legacy', + }, + {as: 'menu', label: 'Lighting'}, + ), }, {label: 'Viewport Config'}, ), From 9a7533bd1701ef6f15578a279a62ab48aa1d479a Mon Sep 17 00:00:00 2001 From: Andrew Prifer Date: Thu, 19 May 2022 11:39:28 +0200 Subject: [PATCH 2/2] Move around some things, tiny fixes --- .../r3f/src/components/SnapshotEditor.tsx | 43 ++++++++----------- 1 file changed, 19 insertions(+), 24 deletions(-) diff --git a/packages/r3f/src/components/SnapshotEditor.tsx b/packages/r3f/src/components/SnapshotEditor.tsx index b295793ef..675671bb5 100644 --- a/packages/r3f/src/components/SnapshotEditor.tsx +++ b/packages/r3f/src/components/SnapshotEditor.tsx @@ -1,6 +1,6 @@ -import {useCallback, useEffect, useLayoutEffect, useMemo, useState} 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' @@ -16,7 +16,6 @@ import {getEditorSheet, getEditorSheetObject} from './editorStuff' import type {$IntentionalAny} from '@theatre/shared/utils/types' import {InfiniteGridHelper} from '../InfiniteGridHelper' import {DragDetectorProvider} from './DragDetector' -import type {Camera, Scene, WebGLRenderer} from 'three' const GlobalStyle = createGlobalStyle` :host { @@ -41,6 +40,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, @@ -48,6 +52,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 @@ -107,12 +121,6 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => { const snapshotEditorSheet = getEditorSheet() const paneId = props.paneId const editorObject = getEditorSheetObject() - const [gl, setGL] = useState() - const [scene, setScene] = useState() - const [camera, setCamera] = useState() - - const viewportLighting = - useVal(editorObject?.props.viewport.lighting) ?? 'physical' const [sceneSnapshot, createSnapshot] = useEditorStore( (state) => [state.sceneSnapshot, state.createSnapshot], @@ -134,13 +142,6 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => { } }, [editorOpen]) - useEffect(() => { - if (gl && scene && camera) { - gl.physicallyCorrectLights = viewportLighting === 'physical' - gl.compile(scene, camera) - } - }, [gl, viewportLighting]) - const onPointerMissed = useCallback(() => { // This callback runs when the user clicks in an empty space inside a SnapshotEditor. // We'll try to set the current selection to the nearest sheet _if_ at least one object @@ -178,17 +179,11 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => { <> { + onCreated={({gl}) => { gl.setClearColor('white') - setGL(gl) - setScene(scene) - setCamera(camera) }} - shadowMap + shadows dpr={[1, 2]} - fog={'red'} frameloop="demand" onPointerMissed={onPointerMissed} >