How can I covert a scene which contain multiple textures and material into one glb file in react?

Questions
, , , ,
1

I have a scene and from that scene i want to make glb file .The scene contain multiple textures and materials and models i want to combine them and make one glb .

2

This section may be useful - Babylon.js docs

3

yes I have read this and use the gltf and glb funcitons but the files which we are getting from them is not opening in the babylon sandbox and throwing some error…

4

Could you share your case? Otherwise it will be really difficult to help.

5

isure , i am working to convert a whole scene into a glb file ,I have used the glb function from the documentation but the output when I am consoling is this
fileGlb

  1. GLTFData {glTFFiles: {…}}

  2. glTFFiles:

1. scene.glb: Blob

  1. size: 992256
  2. type: "application/octet-stream"
  3. [[Prototype]]: Blob

2. [[Prototype]]: Object
  1. [[Prototype]]: Object
    and i dont think that this is the sufficient data to render the scene.
    I am kind of new in this so I am not able to debug the problem
6

This is the code in react js
async function exportToGLB(scene) {
return GLTF2Export.GLBAsync(scene, “scene.glb”).then((glb) => {

        console.log("fileGlb", glb);
        glb.downloadFiles();
    

}
7

Do you use Inspector in your setup? It has built-in GLB export function, at least to test the export.

8

actually scene is rendering fine in the front-end but I want to store the scene in the glb file …

9

image
image1494×962 108 KB

this is the error when I am trying to upload the glb file to the babylon sandbox

10

From what I see in your last screenshot you export GLTF, not GLB. In case of GLTF you need to drop all files to the Sandbox (.bin file at least).

11

yes but I want to store the data in glb

image
image1863×864 124 KB

this is the model i am getting when i am uploading the glb file
But the model is of a cushion not a ball

12

have you tried to check the exported nodes in the scene explorer (just on the left of the screen)
also try to zoom in inside the sphere maybe you’ll find your model inside

13

image
image1863×864 208 KB

can you explain that what i have to check

14

sure,
the reason to check for the exported nodes is to see if your model is actually exported. I can see that your entire scene is included in the glb (camera, skybox … etc) and that’s the expected behavior from the GLTF export

The sphere that you’re seeing is actually the HDR skybox. you can see once you zoomed in the ground appeared in the middle of the sphere.

you can control what nodes to export by modifying the GLTF export by adding a Suffix to the nodes that you don’t want to export

const SUFFIX = "_DO_NOT_EXPORT"
ground.name = "ground"+ SUFFIX

  const options: IExportOptions = {
    shouldExportNode: (node: Node) => {
      return !includes(node.name, SUFFIX);
    },
  };

  const data = await GLTF2Export.GLBAsync(
    scene,
   "scene",
    options
  );
15

Here is one of the simplest examples of importing GLB model, adding a sphere in Babylon and then export all scene to GLB - https://playground.babylonjs.com/#8IMNBM#837