Chore: Simplified r3f a little bit

packages/plugin-r3f/src/components/Editor.tsx

@@ -1,9 +1,9 @@
 import type {VFC} from 'react'
 import {useLayoutEffect} from 'react'
-import React, {useEffect, useRef, Suspense} from 'react'
+import React, {useEffect, useRef} from 'react'
 import {Canvas} from '@react-three/fiber'
 import {useEditorStore} from '../store'
-import {OrbitControls, Environment} from '@react-three/drei'
+import {OrbitControls} from '@react-three/drei'
 import shallow from 'zustand/shallow'
 import root from 'react-shadow'
 import styles from '../bundle.css.txt'
@@ -16,17 +16,9 @@ import {useVal} from '@theatre/dataverse-react'
 const EditorScene = () => {
   const orbitControlsRef = useRef<typeof OrbitControls>()
 
-  const [
-    editorObject,
-    selectedHdr,
-    useHdrAsBackground,
-    helpersRoot,
-    setOrbitControlsRef,
-  ] = useEditorStore(
+  const [editorObject, helpersRoot, setOrbitControlsRef] = useEditorStore(
     (state) => [
       state.editorObject,
-      state.selectedHdr,
-      state.useHdrAsBackground,
       state.helpersRoot,
       state.setOrbitControlsRef,
     ],
@@ -42,16 +34,6 @@ const EditorScene = () => {
 
   return (
     <>
-      <Suspense fallback={null}>
-        {selectedHdr && (
-          <Environment
-            // @ts-ignore
-            files={selectedHdr}
-            path=""
-            background={useHdrAsBackground}
-          />
-        )}
-      </Suspense>
       {showGrid && <gridHelper args={[1000, 1000, 0x444444, 0x888888]} />}
       {showAxes && <axesHelper args={[500]} />}
       {/* @ts-ignore */}

packages/plugin-r3f/src/components/ViewportShadingSelect.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import type {ViewportShading} from '../store'
 import {FaCube, GiCube, GiIceCube, BiCube} from 'react-icons/all'
 import {CompactModeSelect} from './elements'
-import ViewportShadingSettings from './ViewportShadingSettings'
 
 export interface ViewportShadingSelectProps {
   value: ViewportShading
@@ -39,7 +38,6 @@ const ViewportShadingSelect: VFC<ViewportShadingSelectProps> = ({
         icon: <GiIceCube />,
       },
     ]}
-    settingsPanel={<ViewportShadingSettings />}
   />
 )
 

packages/plugin-r3f/src/components/ViewportShadingSettings.tsx

@@ -1,62 +0,0 @@
-import type {VFC} from 'react'
-import React from 'react'
-import {useEditorStore} from '../store'
-import shallow from 'zustand/shallow'
-import EnvironmentPreview from './EnvironmentPreview'
-import {Checkbox, FormControl, Heading} from './elements'
-
-const ViewportShadingSettings: VFC = () => {
-  const [
-    hdrPaths,
-    selectedHdr,
-    useHdrAsBackground,
-    setSelectedHdr,
-    setUseHdrAsBackground,
-  ] = useEditorStore(
-    (state) => [
-      state.hdrPaths,
-      state.selectedHdr,
-      state.useHdrAsBackground,
-      state.setSelectedHdr,
-      state.setUseHdrAsBackground,
-    ],
-    shallow,
-  )
-
-  return (
-    <div className="w-full">
-      <Heading className="text-xl mb-3">Environment</Heading>
-      <div className="flex flex-col gap-3">
-        <div className="grid grid-cols-2 gap-4 auto-rows-16">
-          <EnvironmentPreview
-            url={null}
-            selected={selectedHdr === null}
-            onClick={() => {
-              setSelectedHdr(null)
-            }}
-          />
-          {hdrPaths.map((hdrPath) => (
-            <EnvironmentPreview
-              key={hdrPath}
-              url={hdrPath}
-              selected={hdrPath === selectedHdr}
-              onClick={() => {
-                setSelectedHdr(hdrPath)
-              }}
-            />
-          ))}
-        </div>
-        <FormControl>
-          <Checkbox
-            checked={useHdrAsBackground}
-            onChange={() => setUseHdrAsBackground(!useHdrAsBackground)}
-          >
-            Use as background
-          </Checkbox>
-        </FormControl>
-      </div>
-    </div>
-  )
-}
-
-export default ViewportShadingSettings

packages/plugin-r3f/src/store.ts

@@ -1,7 +1,7 @@
 import type {StateCreator} from 'zustand'
 import create from 'zustand'
 import type {Object3D, Scene, WebGLRenderer} from 'three'
-import {DefaultLoadingManager, Group} from 'three'
+import {Group} from 'three'
 import type {MutableRefObject} from 'react'
 import type {OrbitControls} from '@react-three/drei'
 // @ts-ignore TODO
@@ -149,9 +149,6 @@ export type EditorStore = {
   canvasName: string
   sceneSnapshot: Scene | null
   editablesSnapshot: Record<string, EditableSnapshot> | null
-  hdrPaths: string[]
-  selectedHdr: string | null
-  useHdrAsBackground: boolean
   initialEditorCamera: ContainerProps['camera']
 
   init: (
@@ -168,8 +165,6 @@ export type EditorStore = {
   ) => void
   addEditable: <T extends EditableType>(type: T, uniqueName: string) => void
   removeEditable: (uniqueName: string) => void
-  setSelectedHdr: (hdr: string | null) => void
-  setUseHdrAsBackground: (use: boolean) => void
   createSnapshot: () => void
   setSheetObject: (uniqueName: string, sheetObject: BaseSheetObjectType) => void
   setSnapshotProxyObject: (
@@ -179,21 +174,6 @@ export type EditorStore = {
 }
 
 const config: StateCreator<EditorStore> = (set, get) => {
-  setTimeout(() => {
-    const existingHandler = DefaultLoadingManager.onProgress
-    DefaultLoadingManager.onProgress = (url, loaded, total) => {
-      existingHandler(url, loaded, total)
-      if (url.match(/\.hdr$/)) {
-        set((state) => {
-          const newPaths = new Set(state.hdrPaths)
-          newPaths.add(url)
-          const selectedHdr = newPaths.size === 1 ? url : state.selectedHdr
-          return {hdrPaths: Array.from(newPaths), selectedHdr}
-        })
-      }
-    }
-  })
-
   return {
     sheet: null,
     editorObject: null,
@@ -207,9 +187,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
     canvasName: 'default',
     sceneSnapshot: null,
     editablesSnapshot: null,
-    hdrPaths: [],
-    selectedHdr: null,
-    useHdrAsBackground: false,
     initialEditorCamera: {},
 
     init: (
@@ -286,13 +263,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
         },
       }))
     },
-    setSelectedHdr: (hdr) => {
-      set({selectedHdr: hdr})
-    },
-
-    setUseHdrAsBackground: (use) => {
-      set({useHdrAsBackground: use})
-    },
 
     createSnapshot: () => {
       set((state) => ({