Fix xrui pointer input & improved follow camera

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

@@ -133,7 +133,7 @@ const raycastComponentData = {
 
 const onSecondaryClick = () => {
   const { physicsWorld } = getState(PhysicsState)
-  const inputPointerEntity = InputPointerComponent.getPointerForCanvas(Engine.instance.viewerEntity)
+  const inputPointerEntity = InputPointerComponent.getPointersForCamera(Engine.instance.viewerEntity)[0]
   if (!inputPointerEntity) return
   const pointerPosition = getComponent(inputPointerEntity, InputPointerComponent).position
   const hits = Physics.castRayFromCamera(

packages/ecs/src/ComponentFunctions.ts

@@ -508,6 +508,7 @@ export function _use(promise) {
  * Use a component in a reactive context (a React component)
  */
 export function useComponent<C extends Component<any>>(entity: Entity, Component: C) {
+  if (entity === UndefinedEntity) throw new Error('InvalidUsage: useComponent called with UndefinedEntity')
   if (!Component.stateMap[entity]) Component.stateMap[entity] = hookstate(none)
   const componentState = Component.stateMap[entity]!
   // use() will suspend the component (by throwing a promise) and resume when the promise is resolved

packages/editor/src/components/properties/CameraPropertiesNodeEditor.tsx

@@ -31,7 +31,7 @@ import { getOptionalComponent, useComponent } from '@etherealengine/ecs/src/Comp
 import { defineQuery } from '@etherealengine/ecs/src/QueryFunctions'
 import { CameraSettingsComponent } from '@etherealengine/engine/src/scene/components/CameraSettingsComponent'
 import { ModelComponent } from '@etherealengine/engine/src/scene/components/ModelComponent'
-import { CameraMode } from '@etherealengine/spatial/src/camera/types/CameraMode'
+import { FollowCameraMode } from '@etherealengine/spatial/src/camera/types/FollowCameraMode'
 import { MeshComponent } from '@etherealengine/spatial/src/renderer/components/MeshComponent'
 import { iterateEntityNode } from '@etherealengine/spatial/src/transform/components/EntityTree'
 
@@ -46,28 +46,29 @@ import { commitProperties, commitProperty, EditorComponentType, updateProperty }
 const cameraModeSelect = [
   {
     label: 'First Person',
-    value: CameraMode.FirstPerson
+    value: FollowCameraMode.FirstPerson
   },
   {
     label: 'Shoulder Cam',
-    value: CameraMode.ShoulderCam
+    value: FollowCameraMode.ShoulderCam
   },
   {
     label: 'Third Person',
-    value: CameraMode.ThirdPerson
+    value: FollowCameraMode.ThirdPerson
   },
   {
     label: 'Top Down',
-    value: CameraMode.TopDown
-  },
-  {
-    label: 'Strategic',
-    value: CameraMode.Strategic
-  },
-  {
-    label: 'Dynamic',
-    value: CameraMode.Dynamic
+    value: FollowCameraMode.TopDown
   }
+  // These are not currently defined or implemented:
+  // {
+  //   label: 'Strategic',
+  //   value: FollowCameraMode.Strategic
+  // },
+  // {
+  //   label: 'Dynamic',
+  //   value: FollowCameraMode.Dynamic
+  // }
 ]
 
 /** Types copied from Camera Modes of engine. */

packages/editor/src/functions/gizmoHelper.ts

@@ -483,7 +483,7 @@ export function controlUpdate(gizmoEntity: Entity) {
 
 function pointerHover(gizmoEntity) {
   // TODO support gizmos in multiple viewports
-  const inputPointerEntity = InputPointerComponent.getPointerForCanvas(Engine.instance.viewerEntity)
+  const inputPointerEntity = InputPointerComponent.getPointersForCamera(Engine.instance.viewerEntity)[0]
   if (!inputPointerEntity) return
   const pointerPosition = getComponent(inputPointerEntity, InputPointerComponent).position
   const gizmoControlComponent = getMutableComponent(gizmoEntity, TransformGizmoControlComponent)
@@ -509,7 +509,7 @@ function pointerHover(gizmoEntity) {
 
 function pointerDown(gizmoEntity) {
   // TODO support gizmos in multiple viewports
-  const inputPointerEntity = InputPointerComponent.getPointerForCanvas(Engine.instance.viewerEntity)
+  const inputPointerEntity = InputPointerComponent.getPointersForCamera(Engine.instance.viewerEntity)[0]
   if (!inputPointerEntity) return
   const pointer = getComponent(inputPointerEntity, InputPointerComponent)
   const gizmoControlComponent = getMutableComponent(gizmoEntity, TransformGizmoControlComponent)
@@ -768,7 +768,7 @@ function applyPivotRotation(entity, pivotToOriginMatrix, originToPivotMatrix, ro
 
 function pointerMove(gizmoEntity) {
   // TODO support gizmos in multiple viewports
-  const inputPointerEntity = InputPointerComponent.getPointerForCanvas(Engine.instance.viewerEntity)
+  const inputPointerEntity = InputPointerComponent.getPointersForCamera(Engine.instance.viewerEntity)[0]
   if (!inputPointerEntity) return
   const pointer = getComponent(inputPointerEntity, InputPointerComponent)
   const gizmoControlComponent = getMutableComponent(gizmoEntity, TransformGizmoControlComponent)
@@ -901,7 +901,7 @@ function pointerMove(gizmoEntity) {
 
 function pointerUp(gizmoEntity) {
   // TODO support gizmos in multiple viewports
-  const inputPointerEntity = InputPointerComponent.getPointerForCanvas(Engine.instance.viewerEntity)
+  const inputPointerEntity = InputPointerComponent.getPointersForCamera(Engine.instance.viewerEntity)[0]
   if (!inputPointerEntity) return
   const pointer = getComponent(inputPointerEntity, InputPointerComponent)
 

packages/engine/src/avatar/AvatarModule.ts

@@ -23,12 +23,12 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { FollowCameraInputSystem } from '@etherealengine/spatial/src/camera/systems/FollowCameraInputSystem'
 import { AvatarIKTargetState } from './state/AvatarIKTargetState'
 import { AvatarState } from './state/AvatarNetworkState'
 import { AnimationSystem } from './systems/AnimationSystem'
 import { AvatarAnimationSystem } from './systems/AvatarAnimationSystem'
 import { AvatarAutopilotSystem } from './systems/AvatarAutopilotSystem'
-import { AvatarCameraInputSystem } from './systems/AvatarCameraInputSystem'
 import { AvatarControllerSystem } from './systems/AvatarControllerSystem'
 import { AvatarInputSystem } from './systems/AvatarInputSystem'
 import { AvatarLoadingSystem } from './systems/AvatarLoadingSystem'
@@ -42,7 +42,7 @@ export default {
   AnimationSystem,
   AvatarAnimationSystem,
   AvatarAutopilotSystem,
-  AvatarCameraInputSystem,
+  AvatarCameraInputSystem: FollowCameraInputSystem,
   AvatarControllerSystem,
   AvatarIKTargetState,
   AvatarInputSystem,

packages/engine/src/avatar/components/AvatarControllerComponent.ts

@@ -48,6 +48,8 @@ import { CameraComponent } from '../../../../spatial/src/camera/components/Camer
 import { setAvatarColliderTransform } from '../functions/spawnAvatarReceptor'
 import { AvatarComponent } from './AvatarComponent'
 
+export const eyeOffset = 0.25
+
 export const AvatarControllerComponent = defineComponent({
   name: 'AvatarControllerComponent',
 
@@ -109,7 +111,8 @@ export const AvatarControllerComponent = defineComponent({
       const cameraEntity = avatarControllerComponent.cameraEntity.value
       if (cameraEntity && entityExists(cameraEntity) && hasComponent(cameraEntity, FollowCameraComponent)) {
         const cameraComponent = getComponent(cameraEntity, FollowCameraComponent)
-        cameraComponent.offset.set(0, avatarComponent.eyeHeight.value, 0)
+        cameraComponent.firstPersonOffset.set(0, avatarComponent.eyeHeight.value, eyeOffset)
+        cameraComponent.thirdPersonOffset.set(0, avatarComponent.eyeHeight.value, 0)
       }
     }, [avatarComponent.avatarHeight, camera.near])
 

packages/engine/src/avatar/functions/autopilotFunctions.ts

@@ -65,7 +65,7 @@ export const autopilotSetPosition = (entity: Entity) => {
 
   const { physicsWorld } = getState(PhysicsState)
 
-  const inputPointerEntity = InputPointerComponent.getPointerForCanvas(Engine.instance.viewerEntity)
+  const inputPointerEntity = InputPointerComponent.getPointersForCamera(Engine.instance.viewerEntity)[0]
   if (!inputPointerEntity) return
   const pointerPosition = getComponent(inputPointerEntity, InputPointerComponent).position
 

packages/engine/src/avatar/functions/spawnAvatarReceptor.ts

@@ -63,8 +63,7 @@ import { proxifyParentChildRelationships } from '../../scene/functions/loadGLTFM
 import { AnimationComponent } from '../components/AnimationComponent'
 import { AvatarAnimationComponent, AvatarRigComponent } from '../components/AvatarAnimationComponent'
 import { AvatarComponent } from '../components/AvatarComponent'
-import { AvatarColliderComponent, AvatarControllerComponent } from '../components/AvatarControllerComponent'
-import { eyeOffset } from '../systems/AvatarTransparencySystem'
+import { AvatarColliderComponent, AvatarControllerComponent, eyeOffset } from '../components/AvatarControllerComponent'
 
 export const spawnAvatarReceptor = (entityUUID: EntityUUID) => {
   const entity = UUIDComponent.getEntityByUUID(entityUUID)