Components

Managing Existing Components

Description: Everything in awe- 3D models, avatars, images, audio—already exists as Components. The Components manager lets you find, duplicate, or destroy these built-in Components in your scene.

import { Components } from "@oo/scripting"

Find by ID
Assign an ID in the Studio’s Scripting menu, then retrieve it:
```
const boss = Components.byId("firstboss")
```
Find by Tag
Assign tag to items in the Studio’s Scripting menu, then retrieve a list:
```
const enemies = Components.byTag("enemies")
```

Find by Filter
Query by any property:

const pickups = Components.filter(it => it.data.name?.startsWith("pickup"))

Duplicate

const original = Components.byId("enemy")
const clone = await original.duplicate()

Destroy
```
myCoin.destroy()
```

Create a new instance at runtime:

await Components.create({
  type: "model",
  url: "/path/model.glb",
  position: { x: 0, y: 1, z: 0 }
})

Creating Custom Components

Description: Extend ScriptComponent to build your own reusable, modular Components. You can add 3D geometry, parameters, triggers, and more. These can soon be published to a shared marketplace.

import { ScriptComponent } from '@oo/scripting'
 
export default class MyCube extends ScriptComponent {
  static config = { transform: true } // makes it draggable in the editor
 
  onRenderInit() {
    // Add geometry (e.g. a box mesh) here
  }
}

Adding Parameters

Expose editable properties in the Studio UI:

import { ScriptComponent, $Param as P } from '@oo/scripting'
 
export default class MyCube extends ScriptComponent {
  color = P.Color("#ffffff");
  
  onRenderUpdate() {
    // e.g. update material color
  }
}

See all available param types (opens in a new tab)

Custom Config & Methods

export default class MyCube extends ScriptComponent { 
    static config = {
        title: "My Cube",
        description: "A customizable cube",
        singleton: false,
        draggable: true,
        transform: true
    }
 
    onReady() {}
}
 
const myCube = await MyCube.create({ color: "#f00" })
const allCubes = MyCube.getInstances()
const mainCube = MyCube.getMain()

Use these building blocks to craft specialized Components that can be dropped into any oncyber scene.