Custom props

Custom props are a powerful way to extend and enhance the functionality of Reactylon components. This documentation will walk you through the various types of custom props available, how to use them, and examples of practical use cases to help you get the most out of this feature.

Cross

The Cross category encompasses props that apply universally across all Reactylon components. These props are intended for settings and behaviors common to any scene object, such as lifecycle callback, inheritance, and other general attributes.

onCreate(node: Babylon.Node)

Callback function executed as soon an instance is created.

cloneFrom

It is used to clone an element. It gets in input a string value containing the name of the node to clone.
Note: If you clone a mesh with physics attached, its physicsBody will also be cloned.

binding

It is used to associate a pure Babylon.js component (created imperatively) to a JSX Reactylon component.
Note: It can be applied to all core Babylon.js elements, but not to GUI elements.

propertiesFrom: Array<Property>

It is used to copy specific properties from another element. It gets in input an array of properties to copy and it injects the properites in the current component. You can copy properties from multipe sources.

type Property = {
    property: string; // name of the property to copy
    source: string;   // source from which the property will be copied
    type: BabylonElements; // type of the Babylon element being copied
}

positionX, positionY, positionZ

Properties used to set position for a specific axis.

rotationX, rotationY, rotationZ

Properties used to set rotation for a specific axis.

scalingX, scalingY, scalingZ

Properties to set scaling for a specific axis.

Cameras

The Cameras category contains props that are specific to cameras objects in Babylon.js.

isManual

This prop is intended for the WebXRCamera. When set to true, it allows you to manually create the WebXRCamera. If not set (default behaviour), in the webXRCamera component will have the camera instance created by the XR Default experience automatically injected.

This props should only be used for advanced scenarios.

canvas

This props must be used only when you have multiple canvas with a single scene. It register the view binding the current camera and the relative canvas.

Meshes

The Meshes category contains props that are specific to mesh objects in Babylon.js.

instanceFrom

It is used to create an instance of a mesh. It gets in input a string value containing the name of the mesh to create an instance from.
Note: If you create an instance of a mesh with physics attached, its physicsBody will also be cloned (this does not happen in pure Babylon.js).

onPick, onDoublePick, onPickDown, onPickUp, onPickOut, onLeftPick, onRightPick, onCenterPick, onLongPress, onPointerOver, onPointerOut, onIntersectionEnter, onIntersectionExit

Callback functions remapping Babylon.js observables to interact with meshes.

intersectionMeshId

Mesh that the action manager will check for intersection (collision) with the current mesh.

HighlightLayer

Props under the Highlight Layer category are used to define the visual effects associated with highlight layers in Babylon.js.

highlightLayer

Object configuration for the specific mesh, it contains:

• color - color of highlighted mesh.
• glowEmissiveOnly - optional property that determines whether the highlight effect is applied to the emissive channels of the mesh only.

Materials

The Materials category covers props related to the materials applied to meshes.

assignTo

It assigns a material to one or more meshes in the scene. It takes an array of meshes as input and applies the specified material to each mesh in the array. This allows you to efficiently manage and update the appearance of multiple meshes at once, ensuring they all share the same visual properties.

Textures

Props in the Textures category deal with the textures that are applied to materials.

kind

It describes the specific property of the material (such as diffuse texture, bump map, normal map, etc.) to which the texture will be applied. It defines where within the material the texture will be mapped, affecting how the material is visually rendered on the mesh.

GUI

The GUI category includes props related to Babylon.js’s graphical user interface (GUI) elements. These props are used to configure and control UI components like buttons, sliders, text boxes, and panels. You can define the appearance, position, and behavior of each GUI element, as well as implement user interactions, making it easy to create interactive overlays and HUDs (Heads-Up Displays) within your 3D scene.

createFullscreenUI

It is a configuration object used to create a full-screen graphical user interface overlay for your scene. When this method is invoked, it sets up a UI layer that spans the entire screen, allowing you to display interactive UI elements (such as buttons, sliders, text, etc.) on top of your 3D scene.

createForMesh

It is a configuration object used to create a graphical user interface overlay for a specific mesh in the 3D scene. This allows you to attach UI elements directly to a mesh, such as labels, buttons, or other interactive components that follow the mesh in 3D space.