TypeScript guides
Engine basics tutorial
Add physics to an entity
18 min
this guide walks you through adding physics components to your entity, allowing it to behave like a real world object ℹ️ complete hello world tutorial docid\ ydhrvx znrogkmzf21s41 first this guide uses the hello ts file from the hello world tutorial docid\ ydhrvx znrogkmzf21s41 project to teach you how to add physics to an entity if you haven't completed such tutorial, you use the code snippet from the introduction as a reference to follow along with this guide introduction in ir engine, entities do not have physics properties by default if you want an entity to interact with forces like gravity, collisions, and movement, you need to explicitly define its physics behavior for this excersice we'll work with the last implementation of the hello ts file from hello world tutorial docid\ ydhrvx znrogkmzf21s41 hello ts file latest version 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' import { geometrytypeenum } from '@ir engine/packages/engine/src/scene/constants/geometrytypeenum' import { physicssystem } from '@ir engine/packages/spatial' // define the custom component export const hellocomponent = ecs definecomponent({ name 'ee tutorial hellocomponent', jsonid 'ee tutorial hello', oninit () => ({ initialized false }) }) // define the query to find entities with hellocomponent const helloquery = ecs definequery(\[hellocomponent]) // define the function to execute const hello = () => { for (const entity of helloquery()) { let { initialized } = ecs getmutablecomponent(entity, hellocomponent) if (initialized value) continue initialized set(true) ecs setcomponent(entity, namecomponent, 'ee tutorial hello entity') ecs setcomponent(entity, visiblecomponent) ecs setcomponent(entity, transformcomponent, { position new vector3(0, 1, 0) }) ecs setcomponent(entity, primitivegeometrycomponent, { geometrytype geometrytypeenum spheregeometry }) } } // define the system export const hellosystem = ecs definesystem({ uuid 'ee tutorial hellosystem', execute hello, insert { after physicssystem } }) the problem a static object so far, we have created an entity and assigned it a shape however, the entity does not interact with the world—it simply exists without movement or collision issue the entity is visible but does not respond to gravity or collisions expected behavior the entity should fall, collide, and respond to forces in the environment you can confirm this by running the scene and walking into the sphere with your avatar right now, the avatar walks through the object because it has no physics properties solution adding physics components to fix this issue, you need to assign physics properties to the sphere by adding two key components rigidbodycomponent – enables physics simulation (gravity, forces, movement) collidercomponent – defines a collision shape , allowing objects to interact physically additionally, you will adjust the spawn height of the sphere so it falls naturally due to gravity step 1 import physics components physics components belong to the spatial physics module in ir engine import them into your script import { rigidbodycomponent } from '@ir engine/packages/spatial/src/physics/components/rigidbodycomponent' import { collidercomponent } from '@ir engine/packages/spatial/src/physics/components/collidercomponent' step 2 assign physics properties 1\ enable rigid body physics the rigidbodycomponent allows the sphere to move dynamically in response to forces and collisions set its type to 'dynamic' so it responds to gravity and forces ecs setcomponent(entity, rigidbodycomponent, { type 'dynamic' }) what this does ✅ the sphere falls to the ground ✅ it can be pushed by other objects 2\ define a collider shape the collidercomponent assigns a collision shape to the sphere, preventing other objects from passing through it use a sphere collider to match the shape of the entity ecs setcomponent(entity, collidercomponent, { shape 'sphere' }) what this does the sphere collides with other objects the avatar can no longer walk through it 3\ adjust the spawn position currently, the sphere spawns at ground level , making it difficult to observe physics effects move it 3 units above the ground so you can see it fall ecs setcomponent(entity, transformcomponent, { position new vector3(0, 3, 0) }) what this does the sphere starts above the ground gravity pulls it down when the scene starts step 3 confirm physics interactions once you have added the physics components, test the behavior to ensure everything is working correctly expected behaviors ✔ the sphere falls to the ground due to gravity ✔ when the avatar walks into the sphere, it moves instead of passing through if something is wrong ⚠ if the sphere doesn’t fall , ensure the rigidbodycomponent is set to type 'dynamic' ⚠ if the avatar still walks through the sphere , double check the collidercomponent final implementation after making these updates, your system definition should look like this 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' import { geometrytypeenum } from '@ir engine/packages/engine/src/scene/constants/geometrytypeenum' import { physicssystem } from '@ir engine/packages/spatial' // import physics components import { rigidbodycomponent } from '@ir engine/packages/spatial/src/physics/components/rigidbodycomponent' import { collidercomponent } from '@ir engine/packages/spatial/src/physics/components/collidercomponent' // define the custom component export const physicscomponent = ecs definecomponent({ name 'ir engine tutorial physicscomponent', jsonid 'ir engine tutorial physics', oninit () => ({ initialized false }) }) // define the query to find entities with physicscomponent const physicsquery = ecs definequery(\[physicscomponent]) // define the system to apply physics export const physicssystem = ecs definesystem({ uuid 'ir engine tutorial physicssystem', execute () => { for (const entity of physicsquery()) { let { initialized } = ecs getmutablecomponent(entity, physicscomponent) if (initialized value) continue initialized set(true) ecs setcomponent(entity, namecomponent, 'ir engine physics entity') ecs setcomponent(entity, visiblecomponent) // set initial position (3 units above ground) ecs setcomponent(entity, transformcomponent, { position new vector3(0, 3, 0) }) // assign primitive geometry ecs setcomponent(entity, primitivegeometrycomponent, { geometrytype geometrytypeenum spheregeometry }) // enable physics ecs setcomponent(entity, rigidbodycomponent, { type 'dynamic' }) ecs setcomponent(entity, collidercomponent, { shape 'sphere' }) } }, insert { after physicssystem } }) summary ✅ entities need physics components to interact with forces like gravity ✅ use rigidbodycomponent to define movement and behavior ✅ use collidercomponent to specify how an entity collides ➡️ next steps state management docid 5lyuyp96afd1v275b sg7