rename facer component to lookat component (#10373)

packages/client-core/i18n/en/editor.json

@@ -268,9 +268,9 @@
         "lbl-callbackID": "Callback ID"
       }
     },
-    "facer": {
-      "name": "Facer",
-      "description": "A facer component that makes the entity always face the user, or another entity",
+    "lookAt": {
+      "name": "LookAt",
+      "description": "A component that makes the entity always face the user, or another entity",
       "target": "Target Entity",
       "xAxis": "X Axis",
       "yAxis": "Y Axis"

packages/editor/src/services/ComponentEditors.tsx

@@ -95,13 +95,12 @@ import { NewVolumetricComponent } from '@etherealengine/engine/src/scene/compone
 import { PlaylistComponent } from '@etherealengine/engine/src/scene/components/PlaylistComponent'
 import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
 import { ColliderComponent } from '@etherealengine/spatial/src/physics/components/ColliderComponent'
-import { FacerComponent } from '@etherealengine/spatial/src/transform/components/FacerComponent'
+import { LookAtComponent } from '@etherealengine/spatial/src/transform/components/LookAtComponent'
 import LoopAnimationNodeEditor from '@etherealengine/ui/src/components/editor/properties/animation'
 import CameraPropertiesNodeEditor from '@etherealengine/ui/src/components/editor/properties/camera'
 import ColliderComponentEditor from '@etherealengine/ui/src/components/editor/properties/collider'
 import EnvMapEditor from '@etherealengine/ui/src/components/editor/properties/envmap'
 import EnvMapBakeNodeEditor from '@etherealengine/ui/src/components/editor/properties/envMapBake'
-import FacerNodeEditor from '@etherealengine/ui/src/components/editor/properties/facer'
 import GroundPlaneNodeEditor from '@etherealengine/ui/src/components/editor/properties/groundPlane'
 import ImageNodeEditor from '@etherealengine/ui/src/components/editor/properties/image'
 import AmbientLightNodeEditor from '@etherealengine/ui/src/components/editor/properties/light/ambient'
@@ -110,6 +109,7 @@ import HemisphereLightNodeEditor from '@etherealengine/ui/src/components/editor/
 import PointLightNodeEditor from '@etherealengine/ui/src/components/editor/properties/light/point'
 import SpotLightNodeEditor from '@etherealengine/ui/src/components/editor/properties/light/spot'
 import LinkNodeEditor from '@etherealengine/ui/src/components/editor/properties/link'
+import LookAtNodeEditor from '@etherealengine/ui/src/components/editor/properties/lookAt'
 import { default as MediaNodeEditor } from '@etherealengine/ui/src/components/editor/properties/media'
 import MeshNodeEditor from '@etherealengine/ui/src/components/editor/properties/mesh'
 import MountPointNodeEditor from '@etherealengine/ui/src/components/editor/properties/mountPoint'
@@ -187,7 +187,7 @@ export const ComponentEditorsState = defineState({
       [GrabbableComponent.name]: GrabbableComponentNodeEditor,
       [ScreenshareTargetComponent.name]: ScreenshareTargetNodeEditor,
       [TextComponent.name]: TextNodeEditor,
-      [FacerComponent.name]: FacerNodeEditor
+      [LookAtComponent.name]: LookAtNodeEditor
     } as Record<string, EditorComponentType>
   }
 })

packages/editor/src/services/ComponentShelfCategoriesState.ts

@@ -73,7 +73,7 @@ import { RigidBodyComponent } from '@etherealengine/spatial/src/physics/componen
 import { TriggerComponent } from '@etherealengine/spatial/src/physics/components/TriggerComponent'
 import { GroupComponent } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
 import { PostProcessingComponent } from '@etherealengine/spatial/src/renderer/components/PostProcessingComponent'
-import { FacerComponent } from '@etherealengine/spatial/src/transform/components/FacerComponent'
+import { LookAtComponent } from '@etherealengine/spatial/src/transform/components/LookAtComponent'
 
 export const ComponentShelfCategoriesState = defineState({
   name: 'ee.editor.ComponentShelfCategories',
@@ -130,7 +130,7 @@ export const ComponentShelfCategoriesState = defineState({
         SplineComponent,
         TextComponent,
         ScreenshareTargetComponent,
-        FacerComponent
+        LookAtComponent
       ]
     } as Record<string, Component[]>
   }

packages/spatial/src/transform/TransformModule.ts

@@ -24,7 +24,7 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { SpawnPoseState } from './SpawnPoseState'
-import { FacerSystem } from './systems/FacerSystem'
+import { LookAtSystem } from './systems/LookAtSystem'
 import { TransformSystem } from './systems/TransformSystem'
 
-export { SpawnPoseState, TransformSystem, FacerSystem }
+export { SpawnPoseState, TransformSystem, LookAtSystem }

packages/spatial/src/transform/components/FacerComponent.ts → packages/spatial/src/transform/components/LookAtComponent.ts

@@ -24,9 +24,9 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { EntityUUID, defineComponent } from '@etherealengine/ecs'
-export const FacerComponent = defineComponent({
-  name: 'FacerComponent',
-  jsonID: 'IR_facer',
+export const LookAtComponent = defineComponent({
+  name: 'LookAtComponent',
+  jsonID: 'IR_lookAt',
   onInit: (entity) => ({
     target: null as EntityUUID | null,
     xAxis: true,

packages/spatial/src/transform/systems/FacerSystem.ts → packages/spatial/src/transform/systems/LookAtSystem.ts

@@ -25,11 +25,11 @@ Ethereal Engine. All Rights Reserved.
 
 import { Engine, Entity, UUIDComponent, defineQuery, defineSystem, getComponent } from '@etherealengine/ecs'
 import { Matrix4, Quaternion, Vector3 } from 'three'
-import { FacerComponent } from '../components/FacerComponent'
+import { LookAtComponent } from '../components/LookAtComponent'
 import { TransformComponent } from '../components/TransformComponent'
 import { TransformSystem } from './TransformSystem'
 
-const facerQuery = defineQuery([FacerComponent, TransformComponent])
+const facerQuery = defineQuery([LookAtComponent, TransformComponent])
 const srcPosition = new Vector3()
 const dstPosition = new Vector3()
 const direction = new Vector3()
@@ -38,13 +38,13 @@ const up = new Vector3(0, 1, 0)
 const lookMatrix = new Matrix4()
 const lookRotation = new Quaternion()
 
-export const FacerSystem = defineSystem({
-  uuid: 'ir.spatial.FacerSystem',
+export const LookAtSystem = defineSystem({
+  uuid: 'ir.spatial.LookAtSystem',
   insert: { before: TransformSystem },
   execute: () => {
     const viewerEntity = Engine.instance.viewerEntity
     for (const entity of facerQuery()) {
-      const facer = getComponent(entity, FacerComponent)
+      const facer = getComponent(entity, LookAtComponent)
       const targetEntity: Entity | null = facer.target ? UUIDComponent.getEntityByUUID(facer.target) : viewerEntity
       if (!targetEntity) continue
       TransformComponent.getWorldPosition(entity, srcPosition)

packages/ui/src/components/editor/properties/facer/index.tsx → packages/ui/src/components/editor/properties/lookAt/index.tsx

@@ -32,7 +32,7 @@ import { FaRegFaceFlushed } from 'react-icons/fa6'
 
 import { EntityUUID } from '@etherealengine/ecs'
 import { EditorComponentType, commitProperty } from '@etherealengine/editor/src/components/properties/Util'
-import { FacerComponent } from '@etherealengine/spatial/src/transform/components/FacerComponent'
+import { LookAtComponent } from '@etherealengine/spatial/src/transform/components/LookAtComponent'
 import BooleanInput from '../../input/Boolean'
 import InputGroup from '../../input/Group'
 import NodeInput from '../../input/Node'
@@ -41,35 +41,35 @@ import NodeEditor from '../nodeEditor'
 /**
  * FacerNodeEditor component used to customize the facer element on the scene
  */
-export const FacerNodeEditor: EditorComponentType = (props) => {
+export const LookAtNodeEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
 
-  const facerComponent = useComponent(props.entity, FacerComponent)
+  const facerComponent = useComponent(props.entity, LookAtComponent)
 
   return (
     <NodeEditor
       entity={props.entity}
-      component={FacerComponent}
-      name={t('editor:properties.facer.name')}
-      description={t('editor:properties.facer.description')}
+      component={LookAtComponent}
+      name={t('editor:properties.lookAt.name')}
+      description={t('editor:properties.lookAt.description')}
     >
-      <InputGroup name="Target" label={t('editor:properties.facer.target')}>
+      <InputGroup name="Target" label={t('editor:properties.lookAt.target')}>
         <NodeInput
           value={facerComponent.target.value ?? ('' as EntityUUID)}
-          onRelease={commitProperty(FacerComponent, 'target')}
-          onChange={commitProperty(FacerComponent, 'target')}
+          onRelease={commitProperty(LookAtComponent, 'target')}
+          onChange={commitProperty(LookAtComponent, 'target')}
         />
       </InputGroup>
-      <InputGroup name="X Axis" label={t('editor:properties.facer.xAxis')}>
-        <BooleanInput value={facerComponent.xAxis.value} onChange={commitProperty(FacerComponent, 'xAxis')} />
+      <InputGroup name="X Axis" label={t('editor:properties.lookAt.xAxis')}>
+        <BooleanInput value={facerComponent.xAxis.value} onChange={commitProperty(LookAtComponent, 'xAxis')} />
       </InputGroup>
-      <InputGroup name="Y Axis" label={t('editor:properties.facer.yAxis')}>
-        <BooleanInput value={facerComponent.yAxis.value} onChange={commitProperty(FacerComponent, 'yAxis')} />
+      <InputGroup name="Y Axis" label={t('editor:properties.lookAt.yAxis')}>
+        <BooleanInput value={facerComponent.yAxis.value} onChange={commitProperty(LookAtComponent, 'yAxis')} />
       </InputGroup>
     </NodeEditor>
   )
 }
 
-FacerNodeEditor.iconComponent = FaRegFaceFlushed
+LookAtNodeEditor.iconComponent = FaRegFaceFlushed
 
-export default FacerNodeEditor
+export default LookAtNodeEditor