Search code examples
reactjsgltfbabylonjs3d-model

How to load gltf Model in Babylonjs Reactjs project


I am using Babylonjs in Reactjs.

I have successfully loaded .babylon model but I want to load .gltf model in Reactjs

How can I load .gltf file model in Babylon reactjs.

here is the code snippet

 loadModels = () => {
    let loader = new AssetsManager(this.scene)   
    let loadModel = loader.addMeshTask("test", "", "", "model.babylon")
    loadModel.onSuccess = ( t ) => {
       // do some code
       // .....
    }
    return loader
}

Thanks.


Solution

  • AssetsManager.addMeshTask eventually calls SceneLoader.ImportMesh which is very similar to SceneLoader.Append. so addMeshTask can load gltf file. One thing you will need to make sure that you added the reference of gltf loader. when I import babylonjs-loaders

    import React, { Component } from 'react'
    import 'babylonjs-loaders';
    ....
    

    then addMeshTask successfully import gltf file.