Load Models

Dealing with 3D models is not always straightforward. Babylon.js offers multiple ways to load models into a scene, such as LoadAssetContainerAsync, ImportMeshAsync, AppendSceneAsync and more. On the other hand, Reactylon provides a unique hook to cover basic and advanced use cases.

Whether you need to simply import a mesh and add it to the scene or require more advanced customizations, the useModel hook is a valuable tool. It accepts three parameters:

url – the URL (or the array buffer) of the mesh to load.
options (optional) – additional configurations for importing the model.
onCreate – a callback function executed when the model is loaded.

It relies on Babylon.js loaders to load models, so make sure they are properly configured. If you encounter any issues, check out the Loaders section for guidance.

Under the hood, the useModel hook calls ImportMeshAsync and manages Suspense, ensuring that the model is loaded before rendering. The beauty of this hook lies in its abstraction: there’s no need to manually dispose of the model, as it is automatically handled when the hosting component is unmounted.

Basic

Often, you may simply need to import a mesh, add it to the scene and apply minor transformations. In such cases, you can use the useModel hook directly and leverage the onCreate function to apply transformations.

In the example below, a single mesh containing three balloons is imported into the scene. Before rendering, it is scaled and rotated.

useModel('/meshes/balloons/balloons.glb', options, (model) => {
  const root = model.meshes[0];
  root.scaling = new Vector3(0.5, 0.5, 0.5);
  root.rotationQuaternion = Quaternion.RotationAxis(Axis.Y, Tools.ToRadians(90));
});

Advanced

Sometimes, you may need further customizations by modifying nested entities (such as submeshes, materials, textures, etc.). In these cases, it’s ideal to handle it in a declarative way. To achieve this, you can use the useModel hook and establish a binding between the imperatively imported entities and the Reactylon components. This binding can be done using the binding prop.

In the following example, the same single above mesh containing three balloons is imported into the scene. This time, the transformations are applied declaratively and the middle balloon is bound to attach a listener. When clicked, it changes color.

const { meshes } = useModel('/meshes/balloons/balloons.glb');
const [albedoColor, setAlbedoColor] = useState<Color3>(Color3.Red());
 
// ...
 
return (
    <mesh name='__root__' binding={meshes[0] as Mesh} scaling={new Vector3(0.5, 0.5, 0.5)} rotationQuaternion={Quaternion.RotationAxis(Axis.Y, Tools.ToRadians(90))}>
        <mesh name='Sphere' binding={meshes[1] as Mesh} onPick={() => setAlbedoColor(Color3.Random())}>
            <pBRMaterial name='Material.001' binding={meshes[1].material as PBRMaterial} albedoColor={albedoColor} />
        </mesh>
    </mesh>
);

Learn More

For advanced scenarios, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/importers/loadingFileTypes/.

Collision Events Custom Props