Getting components
Introduction
Getting references to components in scene can be done directly by decorating properties. The api provided by the editor
resolves the references automatically. This allows to get components references directly when declaring properties
and avoids to use functions such as scene.getMeshByName(...)
etc.
Available decorators
From Children
To get the reference to a child of the current node having the script attached, properties in a script class can
be decorated using the @fromChildren
decorator. The parameter of the decorator is the name of the child to get.
@fromChildren("light")private _light: PointLight;
This parameter is optional. If it is undefined, the name of the property is used. For example:
@fromChildren()private _light: PointLight; // the name of the child must be named "_light" in the Editor.
From Scene
Compared to @fromChildren
, components references can be retrieved by traversing the overall scene using the
@fromScene
decorator. This decorator works like the @fromChildren
one where the parameter is the name of the
node to retrieve. The parameter is also optional.
import { Mesh } from "@babylonjs/core/Meshes/mesh";import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
import { fromScene } from "../decorators";
export default class MyMeshComponent extends Mesh { @fromScene("sun") private _sun: DirectionalLight;
public onStart(): void { this._sun.intensity = 10; }}
From Particles Systems
In Babylon.JS, particle systems are not nodes. To retrieve particle systems, neither @fromChildren
and @fromScene
decorators can be used. To retrieve particle systems, there is a specialized decorator named @fromParticleSystems
.
As for other @from{X}
decorators, the parameter of this decorator is the name of the particle system. If not provided,
the name of the property is used.
import { Mesh } from "@babylonjs/core/Meshes/mesh";import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
import { fromParticleSystems } from "../decorators";
export default class MyMeshComponent extends Mesh { @fromParticleSystems("rain") private _rain: ParticleSystem;
public onStart(): void { this._rain.start(); }}
From Animation Groups
As for particle systems, animation groups are not nodes. To retrieve a reference to an animation group, simply decorate
the property using the @fromAnimationGroups
decorator.
The parameter of this decorator is the name of the animation group. If not provided, the name of the property is used.
import { Mesh } from "@babylonjs/core/Meshes/mesh";import { AnimationGroup } from "@babylonjs/core/Animations/animationGroup";
import { fromAnimationGroups } from "../decorators";
export default class MyMeshComponent extends Mesh { @fromAnimationGroups("walk") private _walk: AnimationGroup;
public onStart(): void { this._walk.play(true); }}
From Sounds
As for animation groups, sounds are not nodes. To retrieve a reference to a sound, simply decorate the property using
the @fromSounds
decorator.
In order to retrieve the reference, the sound must be loaded in the project either attached to a node (spatialized) or loaded as 2D sound.
The parameter of this decorator is the name of the sound. In Babylon.JS, the name of a sound is its path provided
when the sound is being loaded. For example assets/sounds/mySound.mp3
.
To get the name of a sound, the Assets Browser
panel provides a helper by right-clicking
the sound file. Simply
click on Copy Path
in the context menu so the name of the sound is added to the clipboard and just paste it
in code editor on the parameter.
Example:
import { Mesh } from "@babylonjs/core/Meshes/mesh";import { Sound } from "@babylonjs/core/Audio/sound";
import { fromSounds } from "../decorators";
export default class MyMeshComponent extends Mesh { @fromSounds("sounds/6sounds.mp3") private _sound: Sound;
public onStart(): void { this._sound.play(); }}