Primitive-geometry-in-editor

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

@@ -748,6 +748,21 @@
       "lbl-args": "Args",
       "error-url": "Error Loading Script From URL"
     },
+    "primitiveGeometry":{
+      "name": "Primitive Geometry",
+      "description":"3D models of Basic Geometry shapes",
+      "lbl-geometryType": "Geometry Type",
+      "lbl-box": "Box",
+      "lbl-sphere":"Sphere",
+      "lbl-cylinder":"Cylinder",
+      "lbl-capsule":"Capsule",
+      "lbl-plane":"Plane",
+      "lbl-circle":"Circle",
+      "lbl-ring":"Ring",
+      "lbl-torus":"Torus",
+      "lbl-polyhedron":"Polyhedron",
+      "lbl-torusknot":"Torus Knot"
+    },
     "portal": {
       "lbl-portal": "Linked Portal",
       "lbl-redirect": "Use Page Redirect",
@@ -819,6 +834,7 @@
         "EE_model": "Creates objects in the hierarchy. Drag a model from the assets folder into the URL box or drag assets directly from project files into the hierarchy.",
         "EE_volumetric": "Import volumetric files. Accepts DRCS, UVOL, or Manifest Files. Links to cloud hosting.",
         "EE_video": "Imports a 2D plane that accepts .mp4, .mkv, .avi",
+        "EE_variant": "Add model variant for level of detail",
         "EE_positionalAudio": "Import audio clips, .mp3, .flac, .ogg, .wav, .m4a",
         "EE_image": "Imports an image into the scene",
         "GroundPlaneComponent": "Create collision ground plane.",
@@ -840,7 +856,9 @@
         "SplineTrackComponent": "Creates a spline track.",
         "SplineComponent": "Create and customize curves.",
         "EnvmapComponent": "Add environment map to your scene",
-        "PostProcessingComponent":"Add postprocessing effects to your scene"
+        "PostProcessingComponent":"Add postprocessing effects to your scene",
+        "PrimitiveGeometryComponent":"Add basic Geometry to the scene",
+        "LinkComponent":"Add clickable Link to entity to route to different webpage"
       }
     },
     "filebrowser": {

packages/editor/src/components/element/ElementList.tsx

@@ -67,6 +67,7 @@ import { LinkComponent } from '@etherealengine/engine/src/scene/components/LinkC
 import { LoadVolumeComponent } from '@etherealengine/engine/src/scene/components/LoadVolumeComponent'
 import { PostProcessingComponent } from '@etherealengine/engine/src/scene/components/PostProcessingComponent'
 import { Vector3 } from 'three'
+import { PrimitiveGeometryComponent } from '../../../../engine/src/scene/components/PrimitiveGeometryComponent'
 import { ItemTypes } from '../../constants/AssetTypes'
 import { EntityNodeEditor } from '../../functions/ComponentEditors'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
@@ -92,7 +93,13 @@ type SceneElementListItemType = {
 
 export const ComponentShelfCategories: Record<string, Component[]> = {
   Files: [ModelComponent, VolumetricComponent, PositionalAudioComponent, VideoComponent, ImageComponent],
-  'Scene Composition': [GroundPlaneComponent, GroupComponent, ColliderComponent, LoadVolumeComponent],
+  'Scene Composition': [
+    PrimitiveGeometryComponent,
+    GroundPlaneComponent,
+    GroupComponent,
+    ColliderComponent,
+    LoadVolumeComponent
+  ],
   Interaction: [SpawnPointComponent, PortalComponent, LinkComponent],
   Lighting: [
     AmbientLightComponent,
@@ -228,7 +235,7 @@ export function ElementList() {
               <SceneElementListItem
                 key={item.jsonID}
                 item={{
-                  componentJsonID: item.jsonID!,
+                  componentJsonID: item.name!,
                   label: startCase((item.jsonID || item.name).replace('-', ' ').toLowerCase()),
                   Icon: EntityNodeEditor.get(item)?.iconComponent || PlaceHolderIcon,
                   type: ItemTypes.Component

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

@@ -0,0 +1,150 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { getEntityErrors } from '@etherealengine/engine/src/scene/components/ErrorComponent'
+import { PrimitiveGeometryComponent } from '@etherealengine/engine/src/scene/components/PrimitiveGeometryComponent'
+import { GeometryTypeEnum } from '@etherealengine/engine/src/scene/constants/GeometryTypeEnum'
+
+import InterestsIcon from '@mui/icons-material/Interests'
+
+import { NO_PROXY } from '@etherealengine/hyperflux'
+import InputGroup from '../inputs/InputGroup'
+import ParameterInput from '../inputs/ParameterInput'
+import SelectInput from '../inputs/SelectInput'
+import NodeEditor from './NodeEditor'
+import { EditorComponentType, commitProperty } from './Util'
+
+/**
+ * Types of skyboxes
+ *
+ * @type {Array}
+ */
+const GeometryOption = [
+  {
+    label: 'Box',
+    value: GeometryTypeEnum.BoxGeometry
+  },
+  {
+    label: 'Sphere',
+    value: GeometryTypeEnum.SphereGeometry
+  },
+  {
+    label: 'Cylinder',
+    value: GeometryTypeEnum.CylinderGeometry
+  },
+  {
+    label: 'Capsule',
+    value: GeometryTypeEnum.CapsuleGeometry
+  },
+  {
+    label: 'Plane',
+    value: GeometryTypeEnum.PlaneGeometry
+  },
+  {
+    label: 'Circle',
+    value: GeometryTypeEnum.CircleGeometry
+  },
+  {
+    label: 'Ring',
+    value: GeometryTypeEnum.RingGeometry
+  },
+  {
+    label: 'Torus',
+    value: GeometryTypeEnum.TorusGeometry
+  },
+  {
+    label: 'Dodecahedron',
+    value: GeometryTypeEnum.DodecahedronGeometry
+  },
+  {
+    label: 'Icosahedron',
+    value: GeometryTypeEnum.IcosahedronGeometry
+  },
+  {
+    label: 'Octahedron',
+    value: GeometryTypeEnum.OctahedronGeometry
+  },
+  {
+    label: 'Tetrahedron',
+    value: GeometryTypeEnum.TetrahedronGeometry
+  },
+  {
+    label: 'TorusKnot',
+    value: GeometryTypeEnum.TorusKnotGeometry
+  }
+]
+
+/**
+ * SkyboxNodeEditor component class used to render editor view to customize component property.
+ *
+ * @type {class component}
+ */
+
+export const PrimitiveGeometryNodeEditor: EditorComponentType = (props) => {
+  const { t } = useTranslation()
+  const entity = props.entity
+  const hasError = getEntityErrors(entity, PrimitiveGeometryComponent)
+  const primitiveGeometry = useComponent(entity, PrimitiveGeometryComponent)
+  const geometry = primitiveGeometry.geometry.get(NO_PROXY)
+  const renderPrimitiveGeometrySettings = () => (
+    <ParameterInput
+      entity={`${props.entity}-primitive-geometry`}
+      values={(primitiveGeometry.geometry.value as any).parameters}
+      onChange={(k) => (val) => {
+        const params = primitiveGeometry.geometryParams.get(NO_PROXY)
+        params[k] = val
+        commitProperty(PrimitiveGeometryComponent, 'geometryParams')(params)
+      }}
+    />
+  )
+
+  return (
+    <NodeEditor
+      {...props}
+      name={t('editor:properties.primitiveGeometry.name')}
+      description={t('editor:properties.primitiveGeometry.description')}
+    >
+      <InputGroup name="Geometry Type" label={t('editor:properties.primitiveGeometry.lbl-geometryType')}>
+        <SelectInput
+          key={props.entity}
+          options={GeometryOption}
+          value={primitiveGeometry.geometryType.value}
+          onChange={(value) => {
+            commitProperty(PrimitiveGeometryComponent, 'geometryType')(value as GeometryTypeEnum)
+          }}
+        />
+      </InputGroup>
+      {renderPrimitiveGeometrySettings()}
+    </NodeEditor>
+  )
+}
+
+PrimitiveGeometryNodeEditor.iconComponent = InterestsIcon
+
+export default PrimitiveGeometryNodeEditor

packages/editor/src/functions/ComponentEditors.tsx

@@ -82,6 +82,7 @@ import LoadVolumeNodeEditor from '../components/properties/LoadVolumeNodeEditor'
 import { LinkComponent } from '@etherealengine/engine/src/scene/components/LinkComponent'
 import { ShadowComponent } from '@etherealengine/engine/src/scene/components/ShadowComponent'
 
+import { PrimitiveGeometryComponent } from '@etherealengine/engine/src/scene/components/PrimitiveGeometryComponent'
 import LinkNodeEditor from '../components/properties/LinkNodeEditor'
 import LoopAnimationNodeEditor from '../components/properties/LoopAnimationNodeEditor'
 import MediaNodeEditor from '../components/properties/MediaNodeEditor'
@@ -94,6 +95,7 @@ import PointLightNodeEditor from '../components/properties/PointLightNodeEditor'
 import PortalNodeEditor from '../components/properties/PortalNodeEditor'
 import PositionalAudioNodeEditor from '../components/properties/PositionalAudioNodeEditor'
 import { PostProcessingSettingsEditor } from '../components/properties/PostProcessingSettingsEditor'
+import PrimitiveGeometryNodeEditor from '../components/properties/PrimitiveGeometryNodeEditor'
 import { RenderSettingsEditor } from '../components/properties/RenderSettingsEditor'
 import SceneNodeEditor from '../components/properties/SceneNodeEditor'
 import ScenePreviewCameraNodeEditor from '../components/properties/ScenePreviewCameraNodeEditor'
@@ -125,6 +127,8 @@ EntityNodeEditor.set(ModelComponent, ModelNodeEditor)
 EntityNodeEditor.set(ShadowComponent, ShadowProperties)
 EntityNodeEditor.set(LoopAnimationComponent, LoopAnimationNodeEditor)
 EntityNodeEditor.set(ParticleSystemComponent, ParticleSystemNodeEditor)
+EntityNodeEditor.set(PrimitiveGeometryComponent, PrimitiveGeometryNodeEditor)
+
 EntityNodeEditor.set(PortalComponent, PortalNodeEditor)
 EntityNodeEditor.set(MountPointComponent, MountPointNodeEditor)
 EntityNodeEditor.set(ColliderComponent, ColliderNodeEditor)