chore: update maps to latest version of ethereal engine

editor/MapNodeEditor.tsx

@@ -10,8 +10,7 @@ import { getComponent } from '@etherealengine/engine/src/ecs/functions/Component
 
 export const MapNodeEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
-
-  const mapComponent = getComponent(props.node.entity, MapComponent)
+  const mapComponent = getComponent(props.entity, MapComponent)
   console.log('MapNodeEditor')
 
   return (
@@ -25,7 +24,7 @@ export const MapNodeEditor: EditorComponentType = (props) => {
         label={t('editor:properties.map.lbl-useDeviceGeolocation')}
         info={t('editor:properties.map.info-useDeviceGeolocation')}
       >
-        <BooleanInput value={mapComponent.useDeviceGeolocation} onChange={updateProperty(MapComponent, 'useDeviceGeolocation')} />
+        <BooleanInput value={mapComponent.useDeviceGeolocation as boolean} onChange={updateProperty(MapComponent, 'useDeviceGeolocation')} />
       </InputGroup>
       <InputGroup name="Start Latitude" label={t('editor:properties.map.lbl-startLatitude')}>
         <StringInput value={mapComponent.startLatitude} onChange={updateProperty(MapComponent, 'startLatitude')} />
@@ -38,14 +37,14 @@ export const MapNodeEditor: EditorComponentType = (props) => {
         label={t('editor:properties.map.lbl-showRasterTiles')}
         info={t('editor:properties.map.info-showRasterTiles')}
       >
-        <BooleanInput value={mapComponent.showRasterTiles} onChange={updateProperty(MapComponent, 'showRasterTiles')} />
+        <BooleanInput value={mapComponent.showRasterTiles as boolean} onChange={updateProperty(MapComponent, 'showRasterTiles')} />
       </InputGroup>
       <InputGroup
         name="Enable debugging code?"
         label={t('editor:properties.map.lbl-enableDebug')}
         info={t('editor:properties.map.info-enableDebug')}
       >
-        <BooleanInput value={mapComponent.enableDebug} onChange={updateProperty(MapComponent, 'enableDebug')} />
+        <BooleanInput value={mapComponent.enableDebug as boolean} onChange={updateProperty(MapComponent, 'enableDebug')} />
       </InputGroup>
     </NodeEditor>
   )

editor/index.ts

@@ -3,12 +3,11 @@ import { EntityNodeEditor, prefabIcons } from '@etherealengine/editor/src/functi
 import { MapNodeEditor } from './MapNodeEditor'
 import MapIcon from '@mui/icons-material/Map'
 import { map } from '../worldInjection'
-import { World } from '@etherealengine/engine/src/ecs/classes/World'
 import MapUpdateSystem from '../engine/MapUpdateSystem'
 
 EntityNodeEditor[map] = MapNodeEditor
 prefabIcons[map] = MapIcon
 
-export default async (world: World) => {
-  return await MapUpdateSystem(world)
+export default async () => {
+  return await MapUpdateSystem()
 }

engine/MapFunctions.ts

@@ -1,37 +1,42 @@
-import { getStartCoords } from './getStartCoords'
-import { MapComponentType } from './MapComponent'
-import { addComponent, getComponent, hasComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { ComponentJson } from '@etherealengine/common/src/interfaces/SceneInterface'
+import { LoadGLTF } from '@etherealengine/engine/src/assets/functions/LoadGLTF'
+import { defaultAvatarHalfHeight } from '@etherealengine/engine/src/avatar/functions/spawnAvatarReceptor'
 import { DebugNavMeshComponent } from '@etherealengine/engine/src/debug/DebugNavMeshComponent'
-import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
-import { Object3D, Group, Mesh } from 'three'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
+import { EngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
+import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
+import { addComponent, getAllComponents, getComponent, hasComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import { NavMeshComponent } from '@etherealengine/engine/src/navigation/component/NavMeshComponent'
-import { MapAction, mapReducer } from './MapReceptor'
-import { MapComponent } from './MapComponent'
-import { getPhases, startPhases } from './functions/PhaseFunctions'
-import { LoadGLTF } from '@etherealengine/engine/src/assets/functions/LoadGLTF'
-import { avatarHalfHeight } from '@etherealengine/engine/src/avatar/functions/createAvatar'
-import { Text } from 'troika-three-text'
 import { Object3DComponent } from '@etherealengine/engine/src/scene/components/Object3DComponent'
-import { ComponentJson } from '@etherealengine/common/src/interfaces/SceneInterface'
-import { isClient } from '@etherealengine/engine/src/common/functions/isClient'
 import { registerSceneLoadPromise } from '@etherealengine/engine/src/scene/functions/SceneLoading'
-import { EntityNodeComponent } from '@etherealengine/engine/src/scene/components/EntityNodeComponent'
-import { addChildFast, setPosition } from './util'
+import { getState } from '@etherealengine/hyperflux'
+
 import { debounce } from 'lodash'
+import { Group, Mesh, Object3D } from 'three'
+import { Text } from 'troika-three-text'
+
+import { isClient } from '@etherealengine/engine/src/common/functions/getEnvironment'
+import { MapComponent, MapComponentType } from './MapComponent'
+import { MapAction, mapReducer } from './MapReceptor'
+import { getPhases, startPhases } from './functions/PhaseFunctions'
+import { getStartCoords } from './getStartCoords'
+import { addChildFast, setPosition } from './util'
 
 export const SCENE_COMPONENT_MAP = 'map'
 export const SCENE_COMPONENT_MAP_DEFAULT_VALUES = {}
 
 export const deserializeMap = (entity: Entity, json: ComponentJson<MapComponentType>) => {
   if (isClient) {
-    registerSceneLoadPromise(createMap(entity, json.props))
-    if (Engine.isEditor) getComponent(entity, EntityNodeComponent)?.components.push(SCENE_COMPONENT_MAP)
+    registerSceneLoadPromise(createMap(entity, json.props as MapComponentType))
+    if (getState(EngineState).isEditor) {
+      const components = getAllComponents(entity)
+      components.push(SCENE_COMPONENT_MAP)
+    }
   }
 }
 
 export const createMap = async (entity: Entity, args: MapComponentType) => {
-  if(Engine.isEditor && hasComponent(entity, MapComponent)) {
+  if(getState(EngineState).isEditor && hasComponent(entity, MapComponent)) {
     _updateMap(entity, args)
     return
   }
@@ -55,9 +60,9 @@ export const createMap = async (entity: Entity, args: MapComponentType) => {
   const state = mapReducer(null, MapAction.initialize(center, args.scale?.x))
 
   // TODO fix hardcoded URL
-  const spinnerGLTF = await LoadGLTF(Engine.publicPath + '/projects/XREngine-Project-Maps/EarthLowPoly.glb')
+  const spinnerGLTF = await LoadGLTF(getState(EngineState).publicPath + '/projects/XREngine-Project-Maps/EarthLowPoly.glb')
   const spinner = spinnerGLTF.scene as Mesh
-  spinner.position.y = avatarHalfHeight * 2
+  spinner.position.y = defaultAvatarHalfHeight * 2
   spinner.position.z = -150
   state.updateSpinner = spinner
 
@@ -81,7 +86,7 @@ export const createMap = async (entity: Entity, args: MapComponentType) => {
   await startPhases(state, await getPhases({ exclude: ['navigation'] }))
 
   navigationRaycastTarget.scale.setScalar(state.scale)
-  Engine.scene.add(navigationRaycastTarget)
+  Engine.instance.scene.add(navigationRaycastTarget)
 
   addComponent(entity, NavMeshComponent, {
     /*

engine/MapReceptor.ts

@@ -20,7 +20,7 @@ import { MultiPolygon } from 'polygon-clipping'
 import MutableNavMesh from './classes/MutableNavMesh'
 import { LongLat } from './functions/UnitConversionFunctions'
 import HashSet from './classes/HashSet'
-import { isClient } from '@etherealengine/engine/src/common/functions/isClient'
+import { isClient } from '@etherealengine/engine/src/common/functions/getEnvironment'
 import { Mesh } from 'three'
 
 const state = createState({
@@ -86,25 +86,22 @@ export const mapReducer = (_, action: MapActionType) => {
 }
 
 export const mapReceptor = (action: MapActionType) => {
-  state.batch((s) => {
-    switch (action.type) {
-      case 'map.INITIALIZE':
-        return s.merge({
-          center: action.centerPoint,
+  switch(action.type) {
+    case 'map.INITIALIZE': return state.merge({
+      center: action.centerPoint,
           originalCenter: action.centerPoint,
           triggerRefreshRadius: action.triggerRefreshRadius,
           minimumSceneRadius: action.minimumSceneRadius,
           labelRadius: action.minimumSceneRadius * 0.5,
           navMeshRadius: action.minimumSceneRadius * 0.5,
           scale: action.scale
-        })
-      case 'map.SET_CENTER_POINT':
-        return s.merge({
-          center: action.centerPoint,
-          originalCenter: action.centerPoint
-        })
-    }
-  })
+    })
+    case 'map.SET_CENTER_POINT':
+      return state.merge({
+        center: action.centerPoint,
+        originalCenter: action.centerPoint
+      })
+  }
 }
 
 export const accessMapState = () => state

engine/MapUpdateSystem.ts

@@ -1,4 +1,3 @@
-import { System } from '@etherealengine/engine/src/ecs/classes/System'
 import { MapComponent } from './MapComponent'
 import { TransformComponent } from '@etherealengine/engine/src/transform/components/TransformComponent'
 import { fromMetersFromCenter, LongLat } from './functions/UnitConversionFunctions'
@@ -7,14 +6,14 @@ import { Vector3 } from 'three'
 import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
 import { Object3DComponent } from '@etherealengine/engine/src/scene/components/Object3DComponent'
 import { getComponent, defineQuery, addComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
-import { World } from '@etherealengine/engine/src/ecs/classes/World'
 import isIntersectCircleCircle from './functions/isIntersectCircleCircle'
 import { AvatarComponent } from '@etherealengine/engine/src/avatar/components/AvatarComponent'
 import { NavMeshComponent } from '@etherealengine/engine/src/navigation/component/NavMeshComponent'
 import { accessMapState } from './MapReceptor'
 import { Downgraded } from '@hookstate/core'
 import { getPhases, startPhases, resetPhases } from './functions/PhaseFunctions'
 import { TargetCameraRotationComponent } from '@etherealengine/engine/src/camera/components/TargetCameraRotationComponent'
+import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 
 const PI2 = Math.PI * 2
 const $vector3 = new Vector3()
@@ -24,7 +23,7 @@ const $normalScaleViewerPositionDelta = new Array(2) as [number, number]
 const $previousViewerPosition = new Vector3()
 const $previousMapCenterPoint: LongLat = Array(2)
 
-export default async function MapUpdateSystem(world: World): Promise<System> {
+export default async function MapUpdateSystem(): Promise<any> {
   const mapsQuery = defineQuery([MapComponent])
   const viewerQuery = defineQuery([AvatarComponent])
   const navMeshQuery = defineQuery([NavMeshComponent])
@@ -33,12 +32,12 @@ export default async function MapUpdateSystem(world: World): Promise<System> {
   let spinnerAngle = 0
 
   return () => {
-    const viewerEntity = viewerQuery(world)[0]
-    const mapEntities = mapsQuery(world)
+    const viewerEntity = viewerQuery()[0]
+    const mapEntities = mapsQuery()
     const mapEntity = mapEntities[0]
-    const navPlaneEntity = navMeshQuery(world)[0]
+    const navPlaneEntity = navMeshQuery()[0]
     // Sanity checks
-    if (!mapEntity || !viewerEntity) return world
+    if (!mapEntity || !viewerEntity) return 
     if (mapEntities.length > 1) console.warn('Not supported: More than one map!')
     const mapState = accessMapState().attach(Downgraded).get()
     const mapScale = mapState.scale
@@ -100,7 +99,7 @@ export default async function MapUpdateSystem(world: World): Promise<System> {
 
       object3dComponent.value.children[1] = mapState.updateTextContainer!
 
-      avatar.modelContainer.visible = false
+      avatar.model!.visible = false
       addComponent(viewerEntity, TargetCameraRotationComponent, {
         time: 0,
         phi: 0,
@@ -109,7 +108,7 @@ export default async function MapUpdateSystem(world: World): Promise<System> {
         thetaVelocity: { value: Math.PI }
       })
     } else if (mapState.activePhase === 'UpdateScene') {
-      avatar.modelContainer.visible = true
+      avatar.model!.visible = true
       object3dComponent.value.children.length = 0
       for (const key of mapState.completeObjects.keys()) {
         const object = mapState.completeObjects.get(key)
@@ -147,7 +146,7 @@ export default async function MapUpdateSystem(world: World): Promise<System> {
           }
         }
       }
-      navigationRaycastTarget.children.length = 0
+      // navigationRaycastTarget.children.length = 0
       for (const key of mapState.completeObjects.keys()) {
         const layerName = key[0]
         if (layerName === 'landuse_fallback') {
@@ -168,7 +167,7 @@ export default async function MapUpdateSystem(world: World): Promise<System> {
     }
 
     // Update labels
-    if (Math.round(world.fixedElapsedTime / world.fixedDelta) % 20 === 0) {
+    if (Math.round(Engine.instance.elapsedSeconds / Engine.instance.fixedDeltaSeconds) % 20 === 0) {
       for (const label of mapState.labelCache.values()) {
         if (label.mesh) {
           if (
@@ -185,6 +184,5 @@ export default async function MapUpdateSystem(world: World): Promise<System> {
       }
     }
     previousViewerEntity = viewerEntity
-    return world
   }
 }

engine/functions/PhaseFunctions.ts

@@ -1,6 +1,6 @@
+import { isClient } from '@etherealengine/engine/src/common/functions/getEnvironment'
 import { TaskStatus } from '../types'
 import { ICachingPhase, IPhase, ISyncPhase, MapStateUnwrapped } from '../types'
-import { isClient } from '@etherealengine/engine/src/common/functions/isClient'
 
 // Random Thought: Monads like https://github.com/monet/monet.js/blob/master/docs/FREE.md could be useful here.
 type FeatureId = 'navigation'

engine/functions/createFeatureLabel.ts

@@ -37,7 +37,7 @@ function createText(textString: string): Text3D {
 const $cameraDirection = new Vector3()
 function createUpdateClosure(mesh: Text3D, middleSlice: Position[]) {
   return function updateFeatureLabel() {
-    const camera = Engine.camera
+    const camera = Engine.instance.camera
     const [[x1, y1]] = middleSlice
     const [x2, y2] = middleSlice[middleSlice.length - 1]
 
@@ -53,7 +53,7 @@ function createUpdateClosure(mesh: Text3D, middleSlice: Position[]) {
     )
     mesh.rotateX(-Math.PI / 2)
 
-    mesh.fontSize = Math.min(Math.max(Engine.camera.position.y / 4, MINIMUM_FONT_SIZE), MAXIMUM_FONT_SIZE)
+    mesh.fontSize = Math.min(Math.max(Engine.instance.camera.position.y / 4, MINIMUM_FONT_SIZE), MAXIMUM_FONT_SIZE)
 
     mesh.sync()
   }

engine/functions/createGeometry.ts

@@ -22,13 +22,13 @@ function getBuildingColor(feature: SupportedFeature) {
 }
 
 function colorVertices(geometry: BufferGeometry, baseColor: Color, light: Color, shadow: Color) {
-  const normals = geometry.attributes.normal
+  const normals = geometry.attributes.normal as BufferAttribute
   const topColor = baseColor.clone().multiply(light)
   const bottomColor = baseColor.clone().multiply(shadow)
 
   geometry.setAttribute('color', new BufferAttribute(new Float32Array(normals.count * 3), 3))
 
-  const colors = geometry.attributes.color
+  const colors = geometry.attributes.color as BufferAttribute
 
   geometry.computeVertexNormals()
   geometry.computeBoundingBox()

engine/functions/fetchUsingCache.ts

@@ -3,7 +3,7 @@ import { ITuple, MapStateUnwrapped } from '../types'
 import createUsingGetSet from './createUsingGetSet'
 
 export default function fetchUsingCache<CacheKey extends ITuple, Value>(
-  fetch: (state: MapStateUnwrapped, key: CacheKey, ...args: any[]) => Promise<Value>
+  fetch: (state: MapStateUnwrapped, key: CacheKey, ...args: any[]) => Value
 ) {
   const _fetchUsingCache = createUsingGetSet(fetch)
   return async (
@@ -14,7 +14,7 @@ export default function fetchUsingCache<CacheKey extends ITuple, Value>(
   ) => {
     return await _fetchUsingCache(
       cache.get.bind(cache),
-      async function set(key: CacheKey, value: Promise<Value>) {
+      async function set(key: CacheKey, value: Value) {
         const resolvedValue = await value
         cache.set(key, resolvedValue)
       },

engine/functions/findSplitFeatures.ts

@@ -12,7 +12,7 @@ export default function* findSplitFeatures(keys: Iterator<FeatureKey>, features:
   const groups = new Map<GroupKey, Group>()
   const addToGroup = updateKeyVal(
     groups.get.bind(groups),
-    groups.set.bind(groups),
+    groups.set.bind(groups), // help needed!
     (group: Group, newKey: FeatureKey, newFeature: Feature) => {
       return [...group, [newKey, newFeature]]
     },

engine/helpers/PolygonHelpers.ts

@@ -6,7 +6,7 @@ import {
   MeshBasicMaterial,
   Mesh,
   Shape,
-  ShapeBufferGeometry,
+  ShapeGeometry,
   Path
 } from 'three'
 
@@ -34,7 +34,7 @@ export function createPolygonHelper(polygon: Polygon): Mesh {
     shape.holes[innerRingIndex - 1] = path
   }
 
-  const geometry = new ShapeBufferGeometry(shape)
+  const geometry = new ShapeGeometry(shape)
   const material = new MeshBasicMaterial({ color })
 
   geometry.rotateX(-Math.PI / 2)

engine/phases/CreateFallbackLanduseMeshPhase.ts

@@ -1,7 +1,7 @@
 import { TileKey, MapStateUnwrapped } from '../types'
 import { DEFAULT_FEATURE_STYLES, getFeatureStyles, MAX_Z_INDEX } from '../styles'
 import getCachedMaterial from '../functions/getCachedMaterial'
-import { Mesh, MeshLambertMaterial, PlaneBufferGeometry } from 'three'
+import { Mesh, MeshLambertMaterial, PlaneGeometry } from 'three'
 import computeTileBoundingBox from '../functions/computeTileBoundingBox'
 import FeatureKey from '../classes/FeatureKey'
 
@@ -33,7 +33,7 @@ export function execTask(state: MapStateUnwrapped, key: TileKey) {
 
   const material = getCachedMaterial(MeshLambertMaterial, { color, depthTest: false })
 
-  const geometry = new PlaneBufferGeometry(tileWidth, tileHeight)
+  const geometry = new PlaneGeometry(tileWidth, tileHeight)
 
   geometry.rotateX(-Math.PI / 2)
   const mesh = new Mesh(geometry, material)