Start working with the engine

now that you understand how ecs structures entities and components , it’s time to modify your project’s source code and start interacting with ir engine this guide will teach you how to ✅ modify a project’s source code to change its behavior ✅ import necessary components and utilities ✅ configure a project to run inside ir engine ✅ use best practices for working with ecs requirements and dependencies to start working on an ir engine project, you typically follow these three steps install ir engine (already completed) install or create a project (already completed) modify and run the project’s source code (this guide) 💡 installation instructions for full installation details, see the installation docid\ ztovghihael55opvlwtry guide in the technical manual required tools throughout this guide, we will use git and npm if you followed the quickstart guide docid\ wd7rupuysjruhyu8s6jur , these tools should already be installed installing and running projects ir engine supports projects , which function similarly to projects in other game engines but are modular like npm packages understand that projects are the way you extend the engine's functionalities each project’s source code runs globally , which will become an important concept later projects directory structure by default, ir engine scans for projects inside /packages/projects/projects/ to install and run a new project, use git clone https //github com/ir engine/ir tutorial hello packages/projects/projects/ir tutorial hello npm run dev 💡 restart required after installing a new project, restart the engine to apply changes configuring projects to integrate a project’s source code with ir engine, you must import ir engine modules export the code so the engine can execute it project configuration file each project has an xrengine config ts file, which registers it with the engine import type { projectconfiginterface } from '@ir engine/packages/projects/projectconfiginterface' const config projectconfiginterface = { onevent undefined, thumbnail '/static/ir engine thumbnail jpg', routes {}, services undefined, databaseseed undefined, // highlight start worldinjection () => import(' /src/hello') // connect hello ts to the engine // highlight end } export default config for now, just remember this file tells ir engine how to load your project importing required modules in this tutorial, we will modify a sphere primitive in the scene importing spatial components since the sphere is a spatial object, we must import components from the spatial engine module import { namecomponent } from '@ir engine/packages/spatial/src/common/namecomponent' import { visiblecomponent } from '@ir engine/packages/spatial/src/renderer/components/visiblecomponent' import { transformcomponent } from '@ir engine/packages/spatial/src/transform/components/transformcomponent' import { primitivegeometrycomponent } from '@ir engine/packages/engine/src/scene/components/primitivegeometrycomponent' import { vector3 } from 'three' importing ecs utilities to manage entities, we also import ecs functions import { ecs } from '@ir engine/packages/ecs' modifying the source code now that we understand the project structure, let's modify the sphere’s geometry updating the geometry type instead of hardcoding the value 1 for a sphere, we will use a readable enum steps open ir tutorial hello/src/hello ts import geometrytypeenum from the scene/constants/ module replace 1 with geometrytypeenum spheregeometry where is the enum? if you’re unsure where the enum is located, use these hints // full path to geometrytypeenum import { geometrytypeenum } from '@ir engine/packages/engine/src/scene/constants/geometrytypeenum' // assign a sphere geometrytypeenum spheregeometry // assign a cylinder instead (for testing) geometrytypeenum cylindergeometry 💡 no need to restart after modifying source code , simply refresh the browser —no need to restart the engine final implementation after applying the changes, your hello ts file should look like this src/hello ts import { ecs } from '@ir engine/packages/ecs' import { namecomponent } from '@ir engine/packages/spatial/src/common/namecomponent' import { visiblecomponent } from '@ir engine/packages/spatial/src/renderer/components/visiblecomponent' import { transformcomponent } from '@ir engine/packages/spatial/src/transform/components/transformcomponent' import { primitivegeometrycomponent } from '@ir engine/packages/engine/src/scene/components/primitivegeometrycomponent' import { vector3 } from 'three' // highlight start import { geometrytypeenum } from '@ir engine/packages/engine/src/scene/constants/geometrytypeenum' // highlight end const entity = ecs createentity() ecs setcomponent(entity, namecomponent, 'hello world') ecs setcomponent(entity, visiblecomponent) ecs setcomponent(entity, transformcomponent, { position new vector3(0, 1, 0) }) // highlight start ecs setcomponent(entity, primitivegeometrycomponent, { geometrytype geometrytypeenum spheregeometry }) // highlight end confirming the changes to verify that your changes were applied open http //localhost 3000/studio http //localhost 3000/studio open the ir tutorial hello project create a new scene ✅ a white sphere should appear in the center 🎉 great job! you have successfully modified and run your first ir engine project now, let's learn how to define a system docid\ oqt nipcslocktlvz0nto