Scene Reactor Loading Refactor

packages/client-core/src/components/World/EngineHooks.tsx

@@ -173,7 +173,6 @@ export const usePortalTeleport = () => {
   useEffect(() => {
     if (!portalState.activePortalEntity.value) return
 
-    logger.info('Resetting connection for portal teleport.')
     const activePortalEntity = portalState.activePortalEntity.value
 
     if (!activePortalEntity) return

packages/client-core/src/systems/LoadingUISystem.tsx

@@ -119,7 +119,7 @@ function LoadingReactor() {
   const sceneLoaded = useHookstate(getMutableState(EngineState).sceneLoaded)
   const userReady = useHookstate(getMutableState(EngineState).userReady)
   const state = useHookstate(getMutableState(LoadingUISystemState))
-  const sceneData = useHookstate(getMutableState(SceneState).sceneData)
+  const activeScene = useHookstate(getMutableState(SceneState).activeScene)
   const mesh = state.mesh.value
 
   /** Handle loading state changes */
@@ -142,8 +142,9 @@ function LoadingReactor() {
 
   /** Scene data changes */
   useEffect(() => {
-    if (!sceneData.value) return
-    const envmapURL = sceneData.value.thumbnailUrl.replace('thumbnail.ktx2', 'loadingscreen.ktx2')
+    if (!activeScene.value) return
+    const sceneData = getState(SceneState).scenes[activeScene.value]
+    const envmapURL = sceneData.data.thumbnailUrl.replace('thumbnail.ktx2', 'loadingscreen.ktx2')
     if (envmapURL && mesh.userData.url !== envmapURL) {
       mesh.userData.url = envmapURL
       setDefaultPalette()
@@ -178,7 +179,7 @@ function LoadingReactor() {
         }
       )
     }
-  }, [sceneData])
+  }, [activeScene])
 
   useEffect(() => {
     const xrui = getComponent(state.ui.entity.value, XRUIComponent)

packages/client-core/src/user/components/Panel3D/useRender3DPanelSystem.tsx

@@ -36,7 +36,7 @@ import { NameComponent } from '@etherealengine/engine/src/scene/components/NameC
 import { ObjectLayers } from '@etherealengine/engine/src/scene/constants/ObjectLayers'
 
 const initialize3D = () => {
-  const camera = new PerspectiveCamera(60, 1, 0.25, 200)
+  const camera = new PerspectiveCamera(60, 1, 0.25, 100000)
   camera.position.set(0, 1.75, 0.5)
   camera.layers.set(ObjectLayers.Panel)
 
@@ -65,7 +65,7 @@ const initialize3D = () => {
   const controls = getOrbitControls(camera, renderer.domElement)
 
   controls.minDistance = 0.1
-  controls.maxDistance = 100
+  controls.maxDistance = 10000
   controls.target.set(0, 1.65, 0)
   controls.update()
   const entity = createEntity()

packages/client-core/src/world/Location.tsx

@@ -35,7 +35,6 @@ import {
   useLoadScene
 } from '@etherealengine/client-core/src/components/World/LoadLocationScene'
 import { AuthService } from '@etherealengine/client-core/src/user/services/AuthService'
-import { SceneService } from '@etherealengine/client-core/src/world/services/SceneService'
 import { useDefaultLocationSystems } from '@etherealengine/client-core/src/world/useDefaultLocationSystems'
 import { AppLoadingState } from '@etherealengine/engine/src/common/AppLoadingService'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
@@ -65,7 +64,6 @@ const LocationPage = ({ offline }: Props) => {
   }
 
   AuthService.useAPIListeners()
-  SceneService.useAPIListeners()
 
   useLoadEngineWithScene()
   useDefaultLocationSystems(!offline)

packages/client-core/src/world/utils.ts

@@ -27,18 +27,18 @@ import config from '@etherealengine/common/src/config'
 import { SceneJson } from '@etherealengine/common/src/interfaces/SceneInterface'
 import { parseStorageProviderURLs } from '@etherealengine/engine/src/common/functions/parseSceneJSON'
 import { SceneState } from '@etherealengine/engine/src/ecs/classes/Scene'
-import { getMutableState } from '@etherealengine/hyperflux'
+import { SceneID } from '@etherealengine/engine/src/schemas/projects/scene.schema'
 
 const fileServer = config.client.fileServer
 
 export const loadSceneJsonOffline = async (projectName, sceneName) => {
-  const locationName = `${projectName}/${sceneName}`
-  const sceneData = (await (await fetch(`${fileServer}/projects/${locationName}.scene.json`)).json()) as SceneJson
-  const hasKTX2 = await fetch(`${fileServer}/projects/${locationName}.thumbnail.ktx2`).then((res) => res.ok)
-  getMutableState(SceneState).sceneData.set({
+  const sceneID = `${projectName}/${sceneName}` as SceneID
+  const sceneData = (await (await fetch(`${fileServer}/projects/${sceneID}.scene.json`)).json()) as SceneJson
+  const hasKTX2 = await fetch(`${fileServer}/projects/${sceneID}.thumbnail.ktx2`).then((res) => res.ok)
+  SceneState.loadScene(sceneID, {
     scene: parseStorageProviderURLs(sceneData),
     name: sceneName,
-    thumbnailUrl: `${fileServer}/projects/${locationName}.thumbnail.${hasKTX2 ? 'ktx2' : 'jpeg'}`,
+    thumbnailUrl: `${fileServer}/projects/${sceneID}.thumbnail.${hasKTX2 ? 'ktx2' : 'jpeg'}`,
     project: projectName
   })
 }

packages/client/src/pages/capture/capture.tsx

@@ -40,7 +40,6 @@ import {
 import { useRemoveEngineCanvas } from '@etherealengine/client-core/src/hooks/useRemoveEngineCanvas'
 import { ClientNetworkingSystem } from '@etherealengine/client-core/src/networking/ClientNetworkingSystem'
 import { AuthService } from '@etherealengine/client-core/src/user/services/AuthService'
-import { SceneService } from '@etherealengine/client-core/src/world/services/SceneService'
 import { EngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { PresentationSystemGroup } from '@etherealengine/engine/src/ecs/functions/EngineFunctions'
 import { defineSystem, startSystems } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
@@ -87,7 +86,6 @@ export const CaptureLocation = () => {
   }
 
   AuthService.useAPIListeners()
-  SceneService.useAPIListeners()
 
   useEffect(() => {
     startCaptureSystems()

packages/editor/src/components/EditorContainer.tsx

@@ -40,8 +40,10 @@ import { getMutableState, getState, useHookstate } from '@etherealengine/hyperfl
 import Inventory2Icon from '@mui/icons-material/Inventory2'
 import Dialog from '@mui/material/Dialog'
 
+import { SceneState } from '@etherealengine/engine/src/ecs/classes/Scene'
 import { useQuery } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import { SceneAssetPendingTagComponent } from '@etherealengine/engine/src/scene/components/SceneAssetPendingTagComponent'
+import { SceneID } from '@etherealengine/engine/src/schemas/projects/scene.schema'
 import { LocalTransformComponent } from '@etherealengine/engine/src/transform/components/TransformComponent'
 import CircularProgress from '@etherealengine/ui/src/primitives/mui/CircularProgress'
 import { t } from 'i18next'
@@ -50,7 +52,6 @@ import { Vector2, Vector3 } from 'three'
 import { ItemTypes } from '../constants/AssetTypes'
 import { EditorControlFunctions } from '../functions/EditorControlFunctions'
 import { extractZip, uploadProjectFiles } from '../functions/assetFunctions'
-import { loadProjectScene } from '../functions/projectFunctions'
 import { createNewScene, getScene, saveScene } from '../functions/sceneFunctions'
 import { getCursorSpawnPosition } from '../functions/screenSpaceFunctions'
 import { takeScreenshot } from '../functions/takeScreenshot'
@@ -196,7 +197,7 @@ const loadScene = async (sceneName: string) => {
     if (!project.scene) {
       return
     }
-    loadProjectScene(project)
+    SceneState.loadScene(`${projectName}/${sceneName}` as SceneID, project)
   } catch (error) {
     logger.error(error)
   }

packages/editor/src/components/element/ElementList.tsx

@@ -64,7 +64,6 @@ import { IconButton, PopoverPosition } from '@mui/material'
 import { BehaveGraphComponent } from '@etherealengine/engine/src/behave-graph/components/BehaveGraphComponent'
 import { EnvmapComponent } from '@etherealengine/engine/src/scene/components/EnvmapComponent'
 import { LinkComponent } from '@etherealengine/engine/src/scene/components/LinkComponent'
-import { LoadVolumeComponent } from '@etherealengine/engine/src/scene/components/LoadVolumeComponent'
 import { PostProcessingComponent } from '@etherealengine/engine/src/scene/components/PostProcessingComponent'
 import { SceneDynamicLoadTagComponent } from '@etherealengine/engine/src/scene/components/SceneDynamicLoadTagComponent'
 import { Vector3 } from 'three'
@@ -99,7 +98,8 @@ export const ComponentShelfCategories: Record<string, Component[]> = {
     GroundPlaneComponent,
     GroupComponent,
     ColliderComponent,
-    LoadVolumeComponent
+    VariantComponent,
+    SceneDynamicLoadTagComponent
   ],
   Interaction: [SpawnPointComponent, PortalComponent, LinkComponent],
   Lighting: [
@@ -111,15 +111,7 @@ export const ComponentShelfCategories: Record<string, Component[]> = {
   ],
   FX: [ParticleSystemComponent, EnvmapComponent, PostProcessingComponent],
   Scripting: [SystemComponent, BehaveGraphComponent],
-  Misc: [
-    VariantComponent,
-    SceneDynamicLoadTagComponent,
-    EnvMapBakeComponent,
-    ScenePreviewCameraComponent,
-    SkyboxComponent,
-    SplineTrackComponent,
-    SplineComponent
-  ]
+  Misc: [EnvMapBakeComponent, ScenePreviewCameraComponent, SkyboxComponent, SplineTrackComponent, SplineComponent]
 }
 
 const SceneElementListItem = ({ item, onClick, onContextMenu }: SceneElementListItemType) => {

packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx

@@ -166,7 +166,8 @@ export default function HierarchyPanel() {
   const [searchHierarchy, setSearchHierarchy] = useState<string>('')
   const showObject3DInHierarchy = editorState.showObject3DInHierarchy
 
-  useHookstate(UUIDComponent.entitiesByUUIDState.keys.length)
+  const activeScene = useHookstate(getMutableState(SceneState).activeScene)
+  const entities = useHookstate(UUIDComponent.entitiesByUUIDState)
 
   const MemoTreeNode = memo(
     (props: HierarchyTreeNodeProps) => (
@@ -187,20 +188,22 @@ export default function HierarchyPanel() {
     })
   }
 
-  const updateNodeHierarchy = useCallback(() => {
+  useEffect(() => {
+    if (!activeScene.value) return
     setNodes(
       getModelNodesFromTreeWalker(
         Array.from(
-          heirarchyTreeWalker(getState(SceneState).sceneEntity, selectionState.selectedEntities.value, collapsedNodes)
+          heirarchyTreeWalker(
+            SceneState.getRootEntity(getState(SceneState).activeScene!),
+            selectionState.selectedEntities.value,
+            collapsedNodes
+          )
         ),
         collapsedNodes,
         showObject3DInHierarchy.value
       )
     )
-  }, [collapsedNodes])
-
-  useEffect(updateNodeHierarchy, [collapsedNodes])
-  useEffect(updateNodeHierarchy, [showObject3DInHierarchy, selectionState.selectedEntities])
+  }, [collapsedNodes, activeScene, showObject3DInHierarchy, selectionState.selectedEntities, entities])
 
   const setSelectedNode = (selection) => !editorState.lockPropertiesPanel.value && _setSelectedNode(selection)
 
@@ -468,9 +471,11 @@ export default function HierarchyPanel() {
     canDrop(item: any, monitor) {
       if (!monitor.isOver({ shallow: true })) return false
 
+      if (!getState(SceneState).activeScene) return false
+
       // check if item is of node type
       if (item.type === ItemTypes.Node) {
-        const sceneEntity = getState(SceneState).sceneEntity
+        const sceneEntity = SceneState.getRootEntity(getState(SceneState).activeScene!)
         return !(item.multiple
           ? item.value.some((otherObject) => isAncestor(otherObject, sceneEntity))
           : isAncestor(item.value, sceneEntity))
@@ -505,6 +510,8 @@ export default function HierarchyPanel() {
     </FixedSizeList>
   )
 
+  if (!activeScene) return <></>
+
   return (
     <>
       <div className={styles.panelContainer}>

packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx

@@ -161,16 +161,16 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => {
   const dropItem = (node: HeirarchyTreeNodeType, place: 'On' | 'Before' | 'After') => {
     const isObj3D = !node.entityNode && node.obj3d
     if (isObj3D) return
-    let parentNode: Entity | null = null
-    let beforeNode: Entity | null = null
+    let parentNode: Entity
+    let beforeNode: Entity
 
     if (place === 'Before') {
       const entityTreeComponent = getComponent(node.entityNode as Entity, EntityTreeComponent)
-      parentNode = entityTreeComponent?.parentEntity
+      parentNode = entityTreeComponent?.parentEntity!
       beforeNode = node.entityNode as Entity
     } else if (place === 'After') {
       const entityTreeComponent = getComponent(node.entityNode as Entity, EntityTreeComponent)
-      parentNode = entityTreeComponent?.parentEntity
+      parentNode = entityTreeComponent?.parentEntity!
       const parentTreeComponent = getComponent(entityTreeComponent?.parentEntity!, EntityTreeComponent)
       if (!node.lastChild && parentNode && parentTreeComponent?.children.length > node.childIndex + 1) {
         beforeNode = parentTreeComponent.children[node.childIndex + 1]