Babylon.js Editor

https://editor.babylonjs.com/documentation
Admin
Babylon.js Editor is a free and open-source visual editor for Babylon.js, providing a simple...
Tokens:9,204
Snippets:72
Trust Score:9.8
Update:9 months ago
Show doc for...
Tokens:
Raw
### TypeScript Class-Based Script Example

Source: https://editor.babylonjs.com/documentation/adding-scripts

Demonstrates a class-based script structure in TypeScript for Babylon.js. It includes constructor, onStart, and onUpdate methods, and utilizes a Mesh object. The onUpdate method modifies the mesh's rotation.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";

export default class MyScriptComponent {
    public constructor(public mesh: Mesh) { }

    public onStart(): void {
        // Do something when the script is loaded
    }

    public onUpdate(): void {
        // Executed each frame
        this.mesh.rotation.y += 0.04 * this.mesh.getScene().getAnimationRatio();
    }
}
```

--------------------------------

### TypeScript Script with Decorators Example

Source: https://editor.babylonjs.com/documentation/adding-scripts

Shows how to use decorators from 'babylonjs-editor-tools' in a class-based TypeScript script to retrieve scene objects like meshes, particle systems, and sounds. It highlights the difference in decorator processing between the constructor and onStart methods.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { Sound } from "@babylonjs/core/Audio/sound";
import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
import { TransformNode } from "@babylonjs/core/Meshes/transformNode";

import {
    nodeFromScene,
    nodeFromDescendants,
    particleSystemFromScene,
    soundFromScene,
} from "babylonjs-editor-tools";

export default class MyScriptComponent {
    @nodeFromScene("ground")
    private _ground: Mesh;

    @nodeFromDescendants("box")
    private _box: Mesh;

    @particleSystemFromScene("particles")
    private _particleSystem: ParticleSystem;

    @soundFromScene("assets/sound.mp3")
    private _mySound: Sound;

    public constructor(public object: TransformNode) {
        // 🚫 decorators were not processed, the sound is NOT available.
        this._mySound.play();
    }

    /**
     * Called on the script is being started.
     */
    public onStart(): void {
        // ✅ decorators were processed, the sound is available.
        this._mySound.play();
    }
}
```

--------------------------------

### Using animationFromSprite Decorator (TypeScript)

Source: https://editor.babylonjs.com/documentation/sprites/using-sprite-manager

This example showcases the 'animationFromSprite' decorator from 'babylonjs-editor-tools' for easily retrieving and playing sprite animations. It simplifies animation management by directly binding animations to class properties.

```typescript
import { Sprite } from "@babylonjs/core/Sprites/sprite";

import { animationFromSprite, ISpriteAnimation } from "babylonjs-editor-tools";

export default class MySpriteComponent {
	@animationFromSprite("water")
	private _waterAnimation!: ISpriteAnimation;

	public constructor(public sprite: Sprite) {}

	public onStart(): void {
		this.sprite.playAnimation(this._waterAnimation.from, this._waterAnimation.to, true, this._waterAnimation.delay);
	}
}
```

--------------------------------

### TypeScript Function-Based Script Example

Source: https://editor.babylonjs.com/documentation/adding-scripts

Illustrates a function-based script structure in TypeScript for Babylon.js. It defines separate onStart and onUpdate functions that accept a Mesh object. The onUpdate function modifies the mesh's rotation.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";

export function onStart(mesh: Mesh): void {
    // Do something when the script is loaded
}

export function onUpdate(mesh: Mesh): void {
    // Executed each frame
    mesh.rotation.y += 0.04 * mesh.getScene().getAnimationRatio();
}
```

--------------------------------

### Listen for Multiple Pointer Events (TypeScript)

Source: https://editor.babylonjs.com/documentation/scripting/listening-events

This example shows how to listen for multiple pointer event types simultaneously using an array with the @onPointerEvent decorator. The decorated method receives a PointerInfo object containing details about the event, including its type.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { PointerEventTypes, PointerInfo } from "@babylonjs/core/Events/pointerEvents";

import { onPointerEvent } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    public constructor(public mesh: Mesh) { }

    @onPointerEvent([
        PointerEventTypes.POINTERTAP,
        PointerEventTypes.POINTERDOUBLETAP
    ])
    public pointerTap(info: PointerInfo): void {
        console.log("A pointer tap has been raised in the scene!", info.type);
    }
}
```

--------------------------------

### Listen for Pointer Events Including Descendants (TypeScript)

Source: https://editor.babylonjs.com/documentation/scripting/listening-events

This example shows how to use the 'includeDescendants' mode with the @onPointerEvent decorator. This allows events to be detected not only on the attached node but also on any of its child nodes, which is particularly useful for complex imported hierarchies.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { PointerEventTypes, PointerInfo } from "@babylonjs/core/Events/pointerEvents";

import { onPointerEvent } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    public constructor(public mesh: Mesh) { }

    /**
     * Listen for double tap event only if the mesh over the pointer is the attached mesh of this script.
     */
    @onPointerEvent(PointerEventTypes.POINTERTAP, {
        mode: "includeDescendants"
    })
    public pointerTap(info: PointerInfo): void {
        console.log("The attached mesh or one of its descendants has been tapped!", this.mesh.name);
    }
}
```

--------------------------------

### Handle Multiple Keyboard Event Types with @onKeyboardEvent (TypeScript)

Source: https://editor.babylonjs.com/documentation/scripting/listening-events

This snippet shows how to listen for multiple keyboard event types (e.g., KEYUP and KEYDOWN) simultaneously using the @onKeyboardEvent decorator by passing an array of event types. Similar to the single event type, it requires imports from '@babylonjs/core' and 'babylonjs-editor-tools', and the method receives KeyboardInfo.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { KeyboardEventTypes, KeyboardInfo } from "@babylonjs/core/Events/keyboardEvents";

import { onKeyboardEvent } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    public constructor(public mesh: Mesh) { }

    @onKeyboardEvent([
        KeyboardEventTypes.KEYUP,
        KeyboardEventTypes.KEYDOWN
    ])
    public keyDown(info: KeyboardInfo): void {
        console.log("A key down event has been raised in the scene!", info.type, " with key: ", info.event.key);
    }
}
```

--------------------------------

### Handle Single Keyboard Event Type with @onKeyboardEvent (TypeScript)

Source: https://editor.babylonjs.com/documentation/scripting/listening-events

This snippet demonstrates how to use the @onKeyboardEvent decorator to register a method that will be called for a specific keyboard event type (e.g., KEYDOWN) in a Babylon.js scene. It requires importing necessary classes from '@babylonjs/core' and the decorator from 'babylonjs-editor-tools'. The decorated method receives KeyboardInfo as an argument.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { KeyboardEventTypes, KeyboardInfo } from "@babylonjs/core/Events/keyboardEvents";

import { onKeyboardEvent } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    public constructor(public mesh: Mesh) { }

    @onKeyboardEvent(KeyboardEventTypes.KEYDOWN)
    public keyDown(info: KeyboardInfo): void {
        console.log("A key down event has been raised in the scene!", info.event.key);
    }
}
```

--------------------------------

### Playing Sprite Animation by Name (TypeScript)

Source: https://editor.babylonjs.com/documentation/sprites/using-sprite-manager

This code demonstrates how to play a sprite animation by its name using the 'playSpriteAnimationFromName' function from the 'babylonjs-editor-tools' package. It's designed to be used within a script assigned to a sprite.

```typescript
import { Sprite } from "@babylonjs/core/Sprites/sprite";

import { playSpriteAnimationFromName } from "babylonjs-editor-tools";

export default class MySpriteComponent {
	public constructor(public sprite: Sprite) {}

	public onStart(): void {
		playSpriteAnimationFromName(this.sprite, "all");
	}
}
```

--------------------------------

### Customize String Property Visibility in Babylon.js Editor

Source: https://editor.babylonjs.com/documentation/scripting/customizing-scripts

Decorates a string property to be displayed as a text input field in the Babylon.js editor's inspector, complete with a label and description. This is commonly used for setting text content in UI elements or object names.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";

import { visibleAsString } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    @visibleAsString("Text", {
        description: "Defines the text drawn in the textblock."
    })
    private _text: string = "";

    public constructor(public mesh: Mesh) { }

    public onStart(): void {
        // Assuming you have a GUI advanced texture setup somewhere

        const textBlock = new TextBlock("name", this._text);
        textBlock.fontSize = 100;
        
        advancedDynamicTexture.addControl(textBlock);
    }
}
```

--------------------------------

### Listen for Single Pointer Event (TypeScript)

Source: https://editor.babylonjs.com/documentation/scripting/listening-events

This snippet demonstrates how to use the @onPointerEvent decorator to listen for a single type of pointer event, such as POINTERTAP. The decorated method is called when the specified event occurs. It requires importing Mesh, PointerEventTypes, and the onPointerEvent decorator.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents";

import { onPointerEvent } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    public constructor(public mesh: Mesh) { }

    @onPointerEvent(PointerEventTypes.POINTERTAP)
    public pointerTap(): void {
        console.log("A pointer tap has been raised in the scene!");
    }
}
```

--------------------------------

### Display Property as Color3 in Inspector (@visibleAsColor3)

Source: https://editor.babylonjs.com/documentation/scripting/customizing-scripts

The @visibleAsColor3 decorator renders a property as an RGB color field in the inspector, automatically including a color picker. Customization options include 'noClamp' to disable value clamping (0-1) and 'noColorPicker' to disable the picker itself.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { Color3 } from "@babylonjs/core/Maths/math.color";

import { visibleAsColor3 } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    @visibleAsColor3("Clear Color RGB")
    private _clearColor: Color3 = Color3.Black();

    public constructor(public mesh: Mesh) { }

    public onStart(): void {
        const scene = this.mesh.getScene();
        scene.clearColor.r = this._clearColor.r;
        scene.clearColor.g = this._clearColor.g;
        scene.clearColor.b = this._clearColor.b;
    }
}
```

--------------------------------

### Display Property as 3D Vector in Inspector (@visibleAsVector3)

Source: https://editor.babylonjs.com/documentation/scripting/customizing-scripts

The @visibleAsVector3 decorator displays a property as a 3D vector (X, Y, Z) in the Babylon.js editor's inspector. It allows customization similar to @visibleAsVector2 and is useful for properties like rotation speed or position.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";

import { visibleAsVector3 } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    @visibleAsVector3("Rotation Speed XYZ")
    private _rotationSpeed: Vector3 = Vector3.Zero();

    public constructor(public mesh: Mesh) { }

    public onUpdate(): void {
        this.mesh.rotation.x += this._rotationSpeed.x * this.mesh.getScene().getAnimationRatio();
        this.mesh.rotation.y += this._rotationSpeed.y * this.mesh.getScene().getAnimationRatio();
        this.mesh.rotation.z += this._rotationSpeed.z * this.mesh.getScene().getAnimationRatio();
    }
}
```

--------------------------------

### Customize Vector2 Property Visibility in Babylon.js Editor

Source: https://editor.babylonjs.com/documentation/scripting/customizing-scripts

Decorates a Vector2 property to be displayed as a 2D vector input (X and Y) in the Babylon.js editor's inspector. It supports optional minimum, maximum, step values, and a degree conversion option. Useful for properties like 2D positioning or velocity.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { Vector2 } from "@babylonjs/core/Maths/math.vector";

import { visibleAsVector2 } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    @visibleAsVector2("Rotation Speed XY")
    private _rotationSpeed: Vector2 = Vector2.Zero();

    public constructor(public mesh: Mesh) { }

    public onUpdate(): void {
        this.mesh.rotation.x += this._rotationSpeed.x * this.mesh.getScene().getAnimationRatio();
        this.mesh.rotation.y += this._rotationSpeed.y * this.mesh.getScene().getAnimationRatio();
    }
}
```

--------------------------------

### Listen for Pointer Events on Attached Mesh Only (TypeScript)

Source: https://editor.babylonjs.com/documentation/scripting/listening-events

This snippet demonstrates how to configure the @onPointerEvent decorator to only trigger for events on the specific mesh the script is attached to. This 'attachedMeshOnly' mode is useful for targeting interactions and requires the script to be attached to a Mesh object.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents";

import { onPointerEvent } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    public constructor(public mesh: Mesh) { }

    /**
     * Listen for double tap event only if the mesh over the pointer is the attached mesh of this script.
     */
    @onPointerEvent(PointerEventTypes.POINTERTAP, {
        mode: "attachedMeshOnly"
    })
    public pointerTap(): void {
        console.log("The attached mesh has been tapped!", this.mesh.name);
    }
}
```

--------------------------------

### Accessing Sprite Instance in Script (TypeScript)

Source: https://editor.babylonjs.com/documentation/sprites/using-sprite-manager

This snippet shows how to access a sprite instance within a script assigned to it. It utilizes the 'Sprite' type from '@babylonjs/core' and demonstrates updating the sprite's angle on each update.

```typescript
import { Sprite } from "@babylonjs/core/Sprites/sprite";

export default class MySpriteComponent {
	public constructor(public sprite: Sprite) {}

	public onUpdate(): void {
		this.sprite.angle += 0.04 * this.sprite.manager.scene.getAnimationRatio();
	}
}
```

--------------------------------

### Customize Boolean Property Visibility in Babylon.js Editor

Source: https://editor.babylonjs.com/documentation/scripting/customizing-scripts

Decorates a boolean property to be displayed as a checkbox in the Babylon.js editor's inspector. It supports a custom label and a tooltip description for better user understanding. This is useful for enabling or disabling features within a script.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";

import { visibleAsBoolean } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    @visibleAsBoolean("Rotation Enabled", {
        description: "Enables or disables rotation of the object."
    })
    private _rotationEnabled: boolean = true;

    public constructor(public mesh: Mesh) { }

    public onUpdate(): void {
        if (this._rotationEnabled) {
            this.mesh.rotation.y += 0.04 * this.mesh.getScene().getAnimationRatio();
        }
    }
}
```

--------------------------------

### Display Property as Color4 in Inspector (@visibleAsColor4)

Source: https://editor.babylonjs.com/documentation/scripting/customizing-scripts

The @visibleAsColor4 decorator displays a property as an RGBA color field in the inspector, complete with a color picker. It supports the same customization options as @visibleAsColor3 ('noClamp', 'noColorPicker') for controlling value clamping and the color picker's visibility.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { Color4 } from "@babylonjs/core/Maths/math.color";

import { visibleAsColor4 } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    @visibleAsColor4("Clear Color")
    private _clearColor: Color4 = new Color4(0, 0, 0, 1);

    public constructor(public mesh: Mesh) { }

    public onStart(): void {
        const scene = this.mesh.getScene();
        scene.clearColor.copyFrom(this._clearColor);
    }
}
```

--------------------------------

### Customize Number Property Visibility in Babylon.js Editor

Source: https://editor.babylonjs.com/documentation/scripting/customizing-scripts

Decorates a number property to be displayed as a number input field in the Babylon.js editor's inspector. It allows setting minimum, maximum, and step values for fine-grained control. This is ideal for properties like speed or scale.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";

import { visibleAsNumber } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    @visibleAsNumber("Rotation Speed", {
        min: 0,
        max: 10,
        step: 0.1,
    })
    private _rotationSpeed: number = 1;

    public constructor(public mesh: Mesh) { }

    public onUpdate(): void {
        this.mesh.rotation.y += this._rotationSpeed * this.mesh.getScene().getAnimationRatio();
    }
}
```

--------------------------------

### Link Property to Scene Entity in Inspector (@visibleAsEntity)

Source: https://editor.babylonjs.com/documentation/scripting/customizing-scripts

The @visibleAsEntity decorator creates a field in the inspector that accepts specific types of Babylon.js scene entities (nodes, sounds, particle systems, animation groups). This establishes a link to the selected entity, retrievable within the script.

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";

import { visibleAsEntity } from "babylonjs-editor-tools";

export default class MyMeshComponent {
    visibleAsEntity("particleSystem", "Fire Particle System", {
        description: "The particle system used to start the fire effect.",
    });
    private _fireParticleSystem!: ParticleSystem;

    public constructor(public mesh: Mesh) { }

    public onStart(): void {
        this._fireParticleSystem.start();
    }
}
```

--------------------------------

### Update Sprite Angles with SpriteManagerNodeComponent (TypeScript)

Source: https://editor.babylonjs.com/documentation/sprites/using-sprite-manager

This TypeScript code defines a component for Babylon.js Editor that iterates through sprites managed by a SpriteManagerNode and updates their angles based on the scene's animation ratio. It assumes the presence of the 'babylonjs-editor-tools' library.

```typescript
import { SpriteManagerNode } from "babylonjs-editor-tools";

export default class MySpriteManagerNodeComponent {
	public constructor(public node: SpriteManagerNode) {}

	public onUpdate(): void {
		this.node.spriteManager?.sprites.forEach((sprite) => {
			sprite.angle += 0.04 * this.node.getScene().getAnimationRatio();
		});
	}
}
```
Tokens:
Raw