Merge pull request #63 from EtherealEngine/refactor-xr-lights

refactor xr lights
EtherealEngine · Nov 23, 2023 · 5c52742 · 5c52742
2 parents fc1095b + 0329c32
commit 5c52742
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 23 deletions.
diff --git a/examples/XRLightEstimation.tsx b/examples/XRLightEstimation.tsx
@@ -1,21 +1,25 @@
 import React, { useEffect } from 'react'
 import { Mesh, MeshStandardMaterial, SphereGeometry } from 'three'
 
-import { MediaIconsBox } from '@etherealengine/client-core/src/components/MediaIconsBox'
-import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { XRLightProbeState } from '@etherealengine/engine/src/xr/XRLightProbeSystem'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 
 import { useLocationSpawnAvatar } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { getComponent, setComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { createEntity, removeEntity } from '@etherealengine/engine/src/ecs/functions/EntityFunctions'
+import { addObjectToGroup } from '@etherealengine/engine/src/scene/components/GroupComponent'
+import { NameComponent } from '@etherealengine/engine/src/scene/components/NameComponent'
+import { VisibleComponent } from '@etherealengine/engine/src/scene/components/VisibleComponent'
+import { TransformComponent } from '@etherealengine/engine/src/transform/components/TransformComponent'
 import { Template } from './utils/template'
 
 export const LightProbe = () => {
-  const xrLightProbeState = useHookstate(getMutableState(XRLightProbeState).environment)
+  const xrLightProbeState = useHookstate(getMutableState(XRLightProbeState))
 
   useEffect(() => {
     if (!xrLightProbeState.value) return
 
-    // const entity = createEntity()
+    const entity = createEntity()
 
     const ballGeometry = new SphereGeometry(0.5, 32, 32)
     const ballMaterial = new MeshStandardMaterial({
@@ -25,16 +29,12 @@ export const LightProbe = () => {
     })
     const ballMesh = new Mesh(ballGeometry, ballMaterial)
 
-    Engine.instance.scene.add(ballMesh)
-    // ballGroup.add(ballMesh);
-
-    // const outlineMesh = new Mesh(isEstimatingLight.geometry.value, new MeshBasicMaterial({ wireframe: true }))
-    // addObjectToGroup(entity, outlineMesh)
-    // setComponent(entity, VisibleComponent)
-    // setComponent(entity, NameComponent, 'Plane ' + isEstimatingLight.plane.orientation.value)
+    addObjectToGroup(entity, ballMesh)
+    getComponent(entity, TransformComponent).position.set(0, 2, 0)
+    setComponent(entity, VisibleComponent)
+    setComponent(entity, NameComponent, 'Light Estimation Helper')
     return () => {
-      // removeObjectFromGroup(entity, outlineMesh)
-      // removeComponent(entity, VisibleComponent)
+      removeEntity(entity)
     }
   }, [xrLightProbeState])
 
@@ -46,9 +46,6 @@ export default function XRLightEstimation() {
   return (
     <>
       <Template />
-      <div style={{ pointerEvents: 'all' }}>
-        <MediaIconsBox />
-      </div>
       <LightProbe />
     </>
   )

diff --git a/examples/XRMeshes.tsx b/examples/XRMeshes.tsx
@@ -58,9 +58,6 @@ export default function AvatarBenchmarking() {
   return (
     <>
       <Template />
-      <div style={{ pointerEvents: 'all' }}>
-        <MediaIconsBox />
-      </div>
       <QueryReactor Components={[XRDetectedPlaneComponent]} ChildEntityReactor={DetectedPlanes} />
       <QueryReactor Components={[XRDetectedMeshComponent]} ChildEntityReactor={DetectedMeshes} />
     </>

diff --git a/examples/XRSuite.tsx b/examples/XRSuite.tsx
@@ -27,9 +27,6 @@ export default function XRSuite() {
   return (
     <>
       <Template />
-      <div style={{ pointerEvents: 'all' }}>
-        <MediaIconsBox />
-      </div>
       <QueryReactor Components={[XRDetectedPlaneComponent]} ChildEntityReactor={DetectedPlanes} />
       <QueryReactor Components={[XRDetectedMeshComponent]} ChildEntityReactor={DetectedMeshes} />
       <LightProbe />

diff --git a/examples/utils/template.tsx b/examples/utils/template.tsx
@@ -1,7 +1,11 @@
 import React, { useEffect } from 'react'
 
+import { ARPlacement } from '@etherealengine/client-core/src/components/ARPlacement'
+import { MediaIconsBox } from '@etherealengine/client-core/src/components/MediaIconsBox'
+import { Shelves } from '@etherealengine/client-core/src/components/Shelves'
 import { useLoadEngineWithScene, useOfflineNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
 import { useLoadScene } from '@etherealengine/client-core/src/components/World/LoadLocationScene'
+import { XRLoading } from '@etherealengine/client-core/src/components/XRLoading'
 import { AvatarService } from '@etherealengine/client-core/src/user/services/AvatarService'
 
 export function Template(props: { projectName?: string; sceneName?: string }) {
@@ -13,5 +17,14 @@ export function Template(props: { projectName?: string; sceneName?: string }) {
     AvatarService.fetchAvatarList()
   }, [])
 
-  return <></>
+  return (
+    <>
+      <div style={{ pointerEvents: 'all' }}>
+        <Shelves />
+        <ARPlacement />
+        <XRLoading />
+        <MediaIconsBox />
+      </div>
+    </>
+  )
 }
diff --git a/examplesRoute.tsx b/examplesRoute.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 
+import '@etherealengine/client-core/src/world/LocationModule'
+
 const buttonStyle = {
   width: 'auto',
   height: '100%',