Copies, Clones and Instances

In Babylon.js, creating copies of meshes can be achieved using different techniques depending on the needs and performance considerations of your scene. These techniques include cloning, instancing, and thin instancing. Each approach has its own use cases, especially when dealing with large numbers of objects or meshes with unique or shared properties.

Clone

A clone is a fully independent copy of a mesh. The cloned mesh will have its own transformations (position, rotation, scaling), material, and geometry, but it starts off with the same values as the original mesh. Once cloned, you can modify the clone separately from the original. To clone an element use cloneFrom prop:

<>
    <box name='box' options={{ width: 1.3, height: 2, depth: 0.7 }} positionX={-1}>
        <standardMaterial name='red-material' diffuseColor={Color3.Red()} />
    </box>
    <box name='cloned-box' positionX={1} cloneFrom='box'>
        <standardMaterial name='yellow-material' diffuseColor={Color3.Yellow()} />
    </box>
</>

If a Babylon.js element is clonable (Class.prototype.clone method exists), Reactylon will add cloneFrom prop to relative JSX element. Under the hood, Reactylon will call .clone method to clone a specific element.

Instance

An instance is a lightweight copy of a mesh that shares the same geometry and material as the original, but can have independent transformations (position, rotation, scale). Unlike cloning, instances use much less memory and are more efficient, as they share the geometry and material between the original mesh and all instances. To create an instance of an element use instanceFrom prop:

<>
    <box name='box' options={{ width: 1.3, height: 2, depth: 0.7 }} positionX={-1} >
        <standardMaterial name='red-material' diffuseColor={Color3.Red()} />
    </box>
    <box name='instanced-box' positionX={1} instanceFrom='box'>
        <standardMaterial name='yellow-material' diffuseColor={Color3.Yellow()} />
    </box>
</>

If a Babylon.js element is instanceable (only meshes), Reactylon will add instanceFrom prop to relative JSX element. Under the hood, Reactylon will call .createInstance method to create an instance starting from a specific element.

⚠️

In the above example we are attempting to assign a material (yellow-material) to instanced-box, since instanced-box is an instance, it can not have its own material. Babylon.js will warn you that the operation has no effect with a warning in console.

Learn More

For properties and additional context, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/copies.

Parents and Pivots Interactions