Add Camera Component to Component Shelf, Camera Prefab to Entity Shelf (

#10741) * renamed the folder for the camera properties created node editor for the camera component added to/from json code in the camera component added camera component to the ui shelf added camera prefab * wrapped this component in a <NodeEditor> element. * forgot to add the props --------- Co-authored-by: Rahul Ghosh <[email protected]>
EtherealEngine · Jul 29, 2024 · b9c9f39 · b9c9f39
1 parent baa255f
commit b9c9f39
Show file tree

Hide file tree

Showing 9 changed files with 354 additions and 199 deletions.
diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
@@ -727,9 +727,17 @@
       }
     },
     "cameraSettings": {
-      "name": "Camera",
+      "name": "Camera Settings",
       "description": "Change the camera settings for this scene."
     },
+    "cameraComponent": {
+      "name": "Camera",
+      "description": "Camera Component",
+      "lbl-fov": "FOV",
+      "lbl-aspect": "Aspect",
+      "lbl-near": "Near",
+      "lbl-far": "Far"
+    },
     "postprocessing": {
       "name": "Post Processing Effect",
       "enabled": "Enabled",

diff --git a/packages/editor/src/components/prefabs/PrefabEditors.tsx b/packages/editor/src/components/prefabs/PrefabEditors.tsx
@@ -142,6 +142,11 @@ export const PrefabShelfState = defineState({
         name: 'Fog',
         url: `${config.client.fileServer}/projects/default-project/assets/prefabs/fog.prefab.gltf`,
         category: 'Lookdev'
+      },
+      {
+        name: 'Camera',
+        url: `${config.client.fileServer}/projects/default-project/assets/prefabs/camera.prefab.gltf`,
+        category: 'Camera'
       }
     ] as PrefabShelfItem[]
 })
diff --git a/packages/editor/src/services/ComponentEditors.tsx b/packages/editor/src/services/ComponentEditors.tsx
@@ -83,7 +83,8 @@ import PersistentAnchorNodeEditor from '@etherealengine/ui/src/components/editor
 import LoopAnimationNodeEditor from '@etherealengine/ui/src/components/editor/properties/animation'
 import AudioAnalysisEditor from '@etherealengine/ui/src/components/editor/properties/audio/analysis'
 import PositionalAudioNodeEditor from '@etherealengine/ui/src/components/editor/properties/audio/positional'
-import CameraPropertiesNodeEditor from '@etherealengine/ui/src/components/editor/properties/camera'
+import CameraNodeEditor from '@etherealengine/ui/src/components/editor/properties/camera'
+import CameraPropertiesNodeEditor from '@etherealengine/ui/src/components/editor/properties/cameraProperties'
 import ColliderComponentEditor from '@etherealengine/ui/src/components/editor/properties/collider'
 import EnvMapBakeNodeEditor from '@etherealengine/ui/src/components/editor/properties/envMapBake'
 import EnvMapEditor from '@etherealengine/ui/src/components/editor/properties/envmap'
@@ -121,6 +122,7 @@ import SkyboxNodeEditor from '@etherealengine/ui/src/components/editor/propertie
 import SpawnPointNodeEditor from '@etherealengine/ui/src/components/editor/properties/spawnPoint'
 import SplineNodeEditor from '@etherealengine/ui/src/components/editor/properties/spline'
 
+import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import InputComponentNodeEditor from '@etherealengine/ui/src/components/editor/properties/input'
 import PlaylistNodeEditor from '@etherealengine/ui/src/components/editor/properties/playlist'
 import SplineTrackNodeEditor from '@etherealengine/ui/src/components/editor/properties/spline/track'
@@ -143,6 +145,7 @@ export const ComponentEditorsState = defineState({
       [RenderSettingsComponent.name]: RenderSettingsEditor,
       [FogSettingsComponent.name]: FogSettingsEditor,
       [CameraSettingsComponent.name]: CameraPropertiesNodeEditor,
+      [CameraComponent.name]: CameraNodeEditor,
       [DirectionalLightComponent.name]: DirectionalLightNodeEditor,
       [HemisphereLightComponent.name]: HemisphereLightNodeEditor,
       [AmbientLightComponent.name]: AmbientLightNodeEditor,

diff --git a/packages/editor/src/services/ComponentShelfCategoriesState.ts b/packages/editor/src/services/ComponentShelfCategoriesState.ts
@@ -66,6 +66,7 @@ import {
   PointLightComponent,
   SpotLightComponent
 } from '@etherealengine/spatial'
+import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
 import { ColliderComponent } from '@etherealengine/spatial/src/physics/components/ColliderComponent'
 import { RigidBodyComponent } from '@etherealengine/spatial/src/physics/components/RigidBodyComponent'
@@ -87,7 +88,13 @@ export const ComponentShelfCategoriesState = defineState({
         VideoComponent,
         ImageComponent
       ],
-      'Scene Composition': [PrimitiveGeometryComponent, GroundPlaneComponent, GroupComponent, VariantComponent],
+      'Scene Composition': [
+        CameraComponent,
+        PrimitiveGeometryComponent,
+        GroundPlaneComponent,
+        GroupComponent,
+        VariantComponent
+      ],
       Physics: [ColliderComponent, RigidBodyComponent, TriggerComponent],
       Interaction: [
         SpawnPointComponent,

diff --git a/packages/projects/default-project/assets/prefabs/camera.prefab.gltf b/packages/projects/default-project/assets/prefabs/camera.prefab.gltf
@@ -0,0 +1,35 @@
+{
+  "asset": {
+    "version": "2.0",
+    "generator": "THREE.GLTFExporter"
+  },
+  "scenes": [
+    {
+      "nodes": [
+        0
+      ]
+    }
+  ],
+  "scene": 0,
+  "nodes": [
+    {
+      "name": "Camera",
+      "extensions": {
+        "EE_uuid": "84e2c62f-0b85-4d4f-9c2e-c974dfa9d347",
+        "EE_visible": true,
+        "EE_camera": {
+          "fov": 1000,
+          "aspect": 1,
+          "near": 0.1,
+          "far": 1000
+        }
+      }
+    }
+  ],
+  "extensionsUsed": [
+    "EE_uuid",
+    "EE_visible",
+    "EE_camera",
+    "EE_ecs"
+  ]
+}
diff --git a/packages/spatial/src/camera/components/CameraComponent.ts b/packages/spatial/src/camera/components/CameraComponent.ts
@@ -31,6 +31,7 @@ import { addObjectToGroup, removeObjectFromGroup } from '../../renderer/componen
 
 export const CameraComponent = defineComponent({
   name: 'CameraComponent',
+  jsonID: 'EE_camera',
   onInit: (entity) => {
     const camera = new ArrayCamera()
     camera.fov = 60
@@ -40,13 +41,23 @@ export const CameraComponent = defineComponent({
     camera.cameras = [new PerspectiveCamera().copy(camera, false)]
     return camera
   },
-  onSet: (entity, component, json: undefined) => {
+  onSet: (entity, component, json) => {
     addObjectToGroup(entity, component.value as ArrayCamera)
+    if (!json) return
+    if (typeof json.fov === 'number') component.fov.set(json.fov)
+    if (typeof json.aspect === 'number') component.fov.set(json.aspect)
+    if (typeof json.near === 'number') component.fov.set(json.near)
+    if (typeof json.far === 'number') component.fov.set(json.far)
   },
   onRemove: (entity, component) => {
     removeObjectFromGroup(entity, component.value as ArrayCamera)
   },
-  toJSON: () => {
-    return null
+  toJSON: (entity, component) => {
+    return {
+      fov: component.fov.value,
+      aspect: component.aspect.value,
+      near: component.near.value,
+      far: component.far.value
+    }
   }
 })