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