Loading multiple .babylon files with file input and useAssetManager returns just one type of model

Bugs
1

I have a simple react application where I’m trying to local files using , and it works succesfully for a single file, but when I try to import multiple the original file is simply readded.

The files I’m using are simple box and triangle exported from a playground to .babylon files.
const box = BABYLON.MeshBuilder.CreateBox(“box”, {});
const cylinder = BABYLON.MeshBuilder.CreateCylinder(“cylinder”, { tessellation: 3}, scene);

Is there a better way to import multiple files with file upload?

Example sandbox

edit I originally used useAssetManager with similar problems

2

Welcome aboard!

I can successfully upload several files with your app:

image
image720×552 36.1 KB

3

Thank you!

Aha, interesting. I wonder if it has something to do with my babylon files then.

Summary 
{
   "autoClear":true,
   "clearColor":[
      0.2,
      0.2,
      0.3,
      1
   ],
   "ambientColor":[
      0,
      0,
      0
   ],
   "gravity":[
      0,
      -9.807,
      0
   ],
   "collisionsEnabled":true,
   "useRightHandedSystem":false,
   "morphTargetManagers":[
      
   ],
   "lights":[
      {
         "tags":null,
         "groundColor":[
            0,
            0,
            0
         ],
         "direction":[
            0,
            1,
            0
         ],
         "diffuse":[
            1,
            1,
            1
         ],
         "specular":[
            1,
            1,
            1
         ],
         "falloffType":0,
         "intensity":1,
         "range":1.7976931348623157e+308,
         "intensityMode":0,
         "radius":0.00001,
         "_renderPriority":0,
         "shadowEnabled":true,
         "excludeWithLayerMask":0,
         "includeOnlyWithLayerMask":0,
         "lightmapMode":0,
         "name":"light",
         "id":"light",
         "state":"",
         "uniqueId":2,
         "type":3,
         "animations":[
            
         ],
         "ranges":[
            
         ],
         "isEnabled":true
      }
   ],
   "cameras":[
      {
         "tags":null,
         "alpha":0.8098054433470528,
         "beta":1.4140978396358923,
         "radius":3,
         "target":[
            0,
            0,
            0
         ],
         "inertialAlphaOffset":0,
         "inertialBetaOffset":0,
         "inertialRadiusOffset":0,
         "lowerBetaLimit":0.01,
         "upperBetaLimit":3.1315926535897933,
         "inertialPanningX":0,
         "inertialPanningY":0,
         "pinchToPanMaxDistance":20,
         "panningOriginTarget":[
            0,
            0,
            0
         ],
         "panningInertia":0.9,
         "zoomToMouseLocation":false,
         "zoomOnFactor":1,
         "targetScreenOffset":[
            0,
            0
         ],
         "allowUpsideDown":true,
         "useInputToRestoreState":true,
         "rotation":[
            0,
            0,
            0
         ],
         "speed":2,
         "position":[
            2.0435693999108198,
            0.46817400209977694,
            2.145841842146343
         ],
         "upVector":[
            0,
            1,
            0
         ],
         "fov":0.8,
         "projectionPlaneTilt":0,
         "minZ":1,
         "maxZ":10000,
         "inertia":0.9,
         "mode":0,
         "layerMask":268435455,
         "fovMode":0,
         "cameraRigMode":0,
         "name":"camera",
         "id":"camera",
         "state":"",
         "uniqueId":1,
         "type":"ArcRotateCamera",
         "inputsmgr":{
            "ArcRotateCameraKeyboardMoveInput":{
               "tags":null,
               "keysUp":[
                  38
               ],
               "keysDown":[
                  40
               ],
               "keysLeft":[
                  37
               ],
               "keysRight":[
                  39
               ],
               "keysReset":[
                  220
               ],
               "panningSensibility":50,
               "zoomingSensibility":25,
               "useAltToZoom":true,
               "angularSpeed":0.01
            },
            "ArcRotateCameraMouseWheelInput":{
               "tags":null,
               "wheelPrecision":3,
               "zoomToMouseLocation":false,
               "wheelDeltaPercentage":0
            },
            "ArcRotateCameraPointersInput":{
               "tags":null,
               "buttons":[
                  0,
                  1,
                  2
               ],
               "angularSensibilityX":1000,
               "angularSensibilityY":1000,
               "pinchPrecision":12,
               "pinchDeltaPercentage":0,
               "useNaturalPinchZoom":false,
               "pinchZoom":true,
               "panningSensibility":1000,
               "multiTouchPanning":true,
               "multiTouchPanAndZoom":true
            }
         },
         "animations":[
            
         ],
         "ranges":[
            
         ],
         "isEnabled":true
      }
   ],
   "activeCameraID":"camera",
   "animations":[
      
   ],
   "materials":[
      {
         "tags":null,
         "ambient":[
            0,
            0,
            0
         ],
         "diffuse":[
            1,
            1,
            1
         ],
         "specular":[
            1,
            1,
            1
         ],
         "emissive":[
            0,
            0,
            0
         ],
         "specularPower":64,
         "useAlphaFromDiffuseTexture":false,
         "useEmissiveAsIllumination":false,
         "linkEmissiveWithDiffuse":false,
         "useSpecularOverAlpha":false,
         "useReflectionOverAlpha":false,
         "disableLighting":false,
         "useObjectSpaceNormalMap":false,
         "useParallax":false,
         "useParallaxOcclusion":false,
         "parallaxScaleBias":0.05,
         "roughness":0,
         "indexOfRefraction":0.98,
         "invertRefractionY":true,
         "alphaCutOff":0.4,
         "useLightmapAsShadowmap":false,
         "useReflectionFresnelFromSpecular":false,
         "useGlossinessFromSpecularMapAlpha":false,
         "maxSimultaneousLights":4,
         "invertNormalMapX":false,
         "invertNormalMapY":false,
         "twoSidedLighting":false,
         "id":"default material",
         "name":"default material",
         "checkReadyOnEveryCall":false,
         "checkReadyOnlyOnce":false,
         "state":"",
         "alpha":1,
         "backFaceCulling":true,
         "cullBackFaces":true,
         "sideOrientation":1,
         "alphaMode":2,
         "_needDepthPrePass":false,
         "disableDepthWrite":false,
         "disableColorWrite":false,
         "forceDepthWrite":false,
         "depthFunction":0,
         "separateCullingPass":false,
         "fogEnabled":true,
         "pointSize":1,
         "zOffset":0,
         "zOffsetUnits":0,
         "pointsCloud":false,
         "fillMode":0,
         "stencil":{
            "tags":null,
            "func":519,
            "funcRef":1,
            "funcMask":255,
            "opStencilFail":7680,
            "opDepthFail":7680,
            "opStencilDepthPass":7681,
            "mask":255,
            "enabled":false
         },
         "uniqueId":5
      }
   ],
   "multiMaterials":[
      
   ],
   "environmentIntensity":1,
   "skeletons":[
      
   ],
   "transformNodes":[
      
   ],
   "geometries":{
      "boxes":[
         
      ],
      "spheres":[
         
      ],
      "cylinders":[
         
      ],
      "toruses":[
         
      ],
      "grounds":[
         
      ],
      "planes":[
         
      ],
      "torusKnots":[
         
      ],
      "vertexData":[
         {
            "id":"f461ab86-1128-43ed-88fb-a52695b0b8fb",
            "uniqueId":4,
            "updatable":false,
            "positions":[
               0.5,
               -0.5,
               0.5,
               -0.5,
               -0.5,
               0.5,
               -0.5,
               0.5,
               0.5,
               0.5,
               0.5,
               0.5,
               0.5,
               0.5,
               -0.5,
               -0.5,
               0.5,
               -0.5,
               -0.5,
               -0.5,
               -0.5,
               0.5,
               -0.5,
               -0.5,
               0.5,
               0.5,
               -0.5,
               0.5,
               -0.5,
               -0.5,
               0.5,
               -0.5,
               0.5,
               0.5,
               0.5,
               0.5,
               -0.5,
               0.5,
               0.5,
               -0.5,
               -0.5,
               0.5,
               -0.5,
               -0.5,
               -0.5,
               -0.5,
               0.5,
               -0.5,
               -0.5,
               0.5,
               0.5,
               -0.5,
               0.5,
               -0.5,
               0.5,
               0.5,
               -0.5,
               0.5,
               0.5,
               0.5,
               0.5,
               -0.5,
               0.5,
               0.5,
               -0.5,
               -0.5,
               -0.5,
               -0.5,
               -0.5,
               -0.5,
               -0.5,
               0.5
            ],
            "normals":[
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               1,
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0
            ],
            "uvs":[
               1,
               1,
               0,
               1,
               0,
               0,
               1,
               0,
               1,
               1,
               0,
               1,
               0,
               0,
               1,
               0,
               1,
               1,
               0,
               1,
               0,
               0,
               1,
               0,
               1,
               1,
               0,
               1,
               0,
               0,
               1,
               0,
               1,
               1,
               0,
               1,
               0,
               0,
               1,
               0,
               1,
               1,
               0,
               1,
               0,
               0,
               1,
               0
            ],
            "indices":[
               0,
               1,
               2,
               0,
               2,
               3,
               4,
               5,
               6,
               4,
               6,
               7,
               8,
               9,
               10,
               8,
               10,
               11,
               12,
               13,
               14,
               12,
               14,
               15,
               16,
               17,
               18,
               16,
               18,
               19,
               20,
               21,
               22,
               20,
               22,
               23
            ]
         }
      ]
   },
   "meshes":[
      {
         "name":"box",
         "id":"box",
         "uniqueId":3,
         "type":"Mesh",
         "position":[
            0,
            0,
            0
         ],
         "rotation":[
            0,
            0,
            0
         ],
         "scaling":[
            1,
            1,
            1
         ],
         "localMatrix":{
            "0":1,
            "1":0,
            "2":0,
            "3":0,
            "4":0,
            "5":1,
            "6":0,
            "7":0,
            "8":0,
            "9":0,
            "10":1,
            "11":0,
            "12":0,
            "13":0,
            "14":0,
            "15":1
         },
         "isEnabled":true,
         "isVisible":true,
         "infiniteDistance":false,
         "pickable":true,
         "receiveShadows":false,
         "billboardMode":0,
         "visibility":1,
         "checkCollisions":false,
         "isBlocker":false,
         "overrideMaterialSideOrientation":null,
         "isUnIndexed":false,
         "geometryUniqueId":4,
         "geometryId":"f461ab86-1128-43ed-88fb-a52695b0b8fb",
         "subMeshes":[
            {
               "materialIndex":0,
               "verticesStart":0,
               "verticesCount":24,
               "indexStart":0,
               "indexCount":36
            }
         ],
         "materialUniqueId":5,
         "materialId":"default material",
         "instances":[
            
         ],
         "animations":[
            
         ],
         "ranges":[
            
         ],
         "layerMask":268435455,
         "alphaIndex":1.7976931348623157e+308,
         "hasVertexAlpha":false,
         "overlayAlpha":0.5,
         "overlayColor":[
            1,
            0,
            0
         ],
         "applyFog":true
      }
   ],
   "particleSystems":[
      
   ],
   "postProcesses":[
      
   ],
   "sounds":[
      
   ]
}
Summary 
{
   "autoClear":true,
   "clearColor":[
      0.2,
      0.2,
      0.3,
      1
   ],
   "ambientColor":[
      0,
      0,
      0
   ],
   "gravity":[
      0,
      -9.807,
      0
   ],
   "collisionsEnabled":true,
   "useRightHandedSystem":false,
   "morphTargetManagers":[
      
   ],
   "lights":[
      {
         "tags":null,
         "groundColor":[
            0,
            0,
            0
         ],
         "direction":[
            1,
            1,
            0
         ],
         "diffuse":[
            1,
            1,
            1
         ],
         "specular":[
            1,
            1,
            1
         ],
         "falloffType":0,
         "intensity":1,
         "range":1.7976931348623157e+308,
         "intensityMode":0,
         "radius":0.00001,
         "_renderPriority":0,
         "shadowEnabled":true,
         "excludeWithLayerMask":0,
         "includeOnlyWithLayerMask":0,
         "lightmapMode":0,
         "name":"light",
         "id":"light",
         "state":"",
         "uniqueId":2,
         "type":3,
         "animations":[
            
         ],
         "ranges":[
            
         ],
         "isEnabled":true
      }
   ],
   "cameras":[
      {
         "tags":null,
         "alpha":1.6507937347001387,
         "beta":0.9383411098523606,
         "radius":4,
         "target":[
            0,
            0,
            0
         ],
         "inertialAlphaOffset":0,
         "inertialBetaOffset":0,
         "inertialRadiusOffset":0,
         "lowerBetaLimit":0.01,
         "upperBetaLimit":3.1315926535897933,
         "inertialPanningX":0,
         "inertialPanningY":0,
         "pinchToPanMaxDistance":20,
         "panningOriginTarget":[
            0,
            0,
            0
         ],
         "panningInertia":0.9,
         "zoomToMouseLocation":false,
         "zoomOnFactor":1,
         "targetScreenOffset":[
            0,
            0
         ],
         "allowUpsideDown":true,
         "useInputToRestoreState":true,
         "rotation":[
            0,
            0,
            0
         ],
         "speed":2,
         "position":[
            -0.2578215905252964,
            2.3645074522782132,
            3.2159963519226507
         ],
         "upVector":[
            0,
            1,
            0
         ],
         "fov":0.8,
         "projectionPlaneTilt":0,
         "minZ":1,
         "maxZ":10000,
         "inertia":0.9,
         "mode":0,
         "layerMask":268435455,
         "fovMode":0,
         "cameraRigMode":0,
         "name":"Camera",
         "id":"Camera",
         "state":"",
         "uniqueId":1,
         "type":"ArcRotateCamera",
         "inputsmgr":{
            "ArcRotateCameraKeyboardMoveInput":{
               "tags":null,
               "keysUp":[
                  38
               ],
               "keysDown":[
                  40
               ],
               "keysLeft":[
                  37
               ],
               "keysRight":[
                  39
               ],
               "keysReset":[
                  220
               ],
               "panningSensibility":50,
               "zoomingSensibility":25,
               "useAltToZoom":true,
               "angularSpeed":0.01
            },
            "ArcRotateCameraMouseWheelInput":{
               "tags":null,
               "wheelPrecision":3,
               "zoomToMouseLocation":false,
               "wheelDeltaPercentage":0
            },
            "ArcRotateCameraPointersInput":{
               "tags":null,
               "buttons":[
                  0,
                  1,
                  2
               ],
               "angularSensibilityX":1000,
               "angularSensibilityY":1000,
               "pinchPrecision":12,
               "pinchDeltaPercentage":0,
               "useNaturalPinchZoom":false,
               "pinchZoom":true,
               "panningSensibility":1000,
               "multiTouchPanning":true,
               "multiTouchPanAndZoom":true
            }
         },
         "animations":[
            
         ],
         "ranges":[
            
         ],
         "isEnabled":true
      }
   ],
   "activeCameraID":"Camera",
   "animations":[
      
   ],
   "materials":[
      {
         "tags":null,
         "ambient":[
            0,
            0,
            0
         ],
         "diffuse":[
            1,
            1,
            1
         ],
         "specular":[
            1,
            1,
            1
         ],
         "emissive":[
            0,
            0,
            0
         ],
         "specularPower":64,
         "useAlphaFromDiffuseTexture":false,
         "useEmissiveAsIllumination":false,
         "linkEmissiveWithDiffuse":false,
         "useSpecularOverAlpha":false,
         "useReflectionOverAlpha":false,
         "disableLighting":false,
         "useObjectSpaceNormalMap":false,
         "useParallax":false,
         "useParallaxOcclusion":false,
         "parallaxScaleBias":0.05,
         "roughness":0,
         "indexOfRefraction":0.98,
         "invertRefractionY":true,
         "alphaCutOff":0.4,
         "useLightmapAsShadowmap":false,
         "useReflectionFresnelFromSpecular":false,
         "useGlossinessFromSpecularMapAlpha":false,
         "maxSimultaneousLights":4,
         "invertNormalMapX":false,
         "invertNormalMapY":false,
         "twoSidedLighting":false,
         "id":"default material",
         "name":"default material",
         "checkReadyOnEveryCall":false,
         "checkReadyOnlyOnce":false,
         "state":"",
         "alpha":1,
         "backFaceCulling":true,
         "cullBackFaces":true,
         "sideOrientation":1,
         "alphaMode":2,
         "_needDepthPrePass":false,
         "disableDepthWrite":false,
         "disableColorWrite":false,
         "forceDepthWrite":false,
         "depthFunction":0,
         "separateCullingPass":false,
         "fogEnabled":true,
         "pointSize":1,
         "zOffset":0,
         "zOffsetUnits":0,
         "pointsCloud":false,
         "fillMode":0,
         "stencil":{
            "tags":null,
            "func":519,
            "funcRef":1,
            "funcMask":255,
            "opStencilFail":7680,
            "opDepthFail":7680,
            "opStencilDepthPass":7681,
            "mask":255,
            "enabled":false
         },
         "uniqueId":5
      }
   ],
   "multiMaterials":[
      
   ],
   "environmentIntensity":1,
   "skeletons":[
      
   ],
   "transformNodes":[
      
   ],
   "geometries":{
      "boxes":[
         
      ],
      "spheres":[
         
      ],
      "cylinders":[
         
      ],
      "toruses":[
         
      ],
      "grounds":[
         
      ],
      "planes":[
         
      ],
      "torusKnots":[
         
      ],
      "vertexData":[
         {
            "id":"5ffcd9ab-be15-4018-af9e-3981865c517e",
            "uniqueId":4,
            "updatable":false,
            "positions":[
               0.5,
               -1,
               0,
               -0.2499999999999999,
               -1,
               -0.43301270189221935,
               -0.2500000000000002,
               -1,
               0.43301270189221924,
               0.5,
               -1,
               1.2246467991473532e-16,
               0.5,
               1,
               0,
               -0.2499999999999999,
               1,
               -0.43301270189221935,
               -0.2500000000000002,
               1,
               0.43301270189221924,
               0.5,
               1,
               1.2246467991473532e-16,
               0,
               -1,
               0,
               0.5,
               -1,
               0,
               -0.2499999999999999,
               -1,
               -0.43301270189221935,
               -0.2500000000000002,
               -1,
               0.43301270189221924,
               0.5,
               -1,
               1.2246467991473532e-16,
               0,
               1,
               0,
               0.5,
               1,
               0,
               -0.2499999999999999,
               1,
               -0.43301270189221935,
               -0.2500000000000002,
               1,
               0.43301270189221924,
               0.5,
               1,
               1.2246467991473532e-16
            ],
            "normals":[
               1,
               0,
               0,
               -0.4999999999999999,
               0,
               -0.8660254037844389,
               -0.5000000000000004,
               0,
               0.8660254037844385,
               1,
               0,
               2.4492935982947064e-16,
               1,
               0,
               0,
               -0.4999999999999999,
               0,
               -0.8660254037844389,
               -0.5000000000000004,
               0,
               0.8660254037844385,
               1,
               0,
               2.4492935982947064e-16,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               -1,
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               1,
               0,
               0,
               1,
               0
            ],
            "uvs":[
               0,
               0,
               0.3333333333333333,
               0,
               0.6666666666666666,
               0,
               1,
               0,
               0,
               1,
               0.3333333333333333,
               1,
               0.6666666666666666,
               1,
               1,
               1,
               0.5,
               0.5,
               1,
               0.5,
               0.2500000000000001,
               0.06698729810778065,
               0.24999999999999978,
               0.9330127018922192,
               1,
               0.5000000000000001,
               0.5,
               0.5,
               1,
               0.5,
               0.2500000000000001,
               0.06698729810778065,
               0.24999999999999978,
               0.9330127018922192,
               1,
               0.5000000000000001
            ],
            "indices":[
               0,
               4,
               1,
               5,
               1,
               4,
               1,
               5,
               2,
               6,
               2,
               5,
               2,
               6,
               3,
               7,
               3,
               6,
               8,
               9,
               10,
               8,
               10,
               11,
               8,
               11,
               12,
               13,
               15,
               14,
               13,
               16,
               15,
               13,
               17,
               16
            ]
         }
      ]
   },
   "meshes":[
      {
         "name":"cylinder",
         "id":"cylinder",
         "uniqueId":3,
         "type":"Mesh",
         "position":[
            0,
            0,
            0
         ],
         "rotation":[
            0,
            0,
            0
         ],
         "scaling":[
            1,
            1,
            1
         ],
         "localMatrix":{
            "0":1,
            "1":0,
            "2":0,
            "3":0,
            "4":0,
            "5":1,
            "6":0,
            "7":0,
            "8":0,
            "9":0,
            "10":1,
            "11":0,
            "12":0,
            "13":0,
            "14":0,
            "15":1
         },
         "isEnabled":true,
         "isVisible":true,
         "infiniteDistance":false,
         "pickable":true,
         "receiveShadows":false,
         "billboardMode":0,
         "visibility":1,
         "checkCollisions":false,
         "isBlocker":false,
         "overrideMaterialSideOrientation":null,
         "isUnIndexed":false,
         "geometryUniqueId":4,
         "geometryId":"5ffcd9ab-be15-4018-af9e-3981865c517e",
         "subMeshes":[
            {
               "materialIndex":0,
               "verticesStart":0,
               "verticesCount":18,
               "indexStart":0,
               "indexCount":36
            }
         ],
         "materialUniqueId":5,
         "materialId":"default material",
         "instances":[
            
         ],
         "animations":[
            
         ],
         "ranges":[
            
         ],
         "layerMask":268435455,
         "alphaIndex":1.7976931348623157e+308,
         "hasVertexAlpha":false,
         "overlayAlpha":0.5,
         "overlayColor":[
            1,
            0,
            0
         ],
         "applyFog":true
      }
   ],
   "particleSystems":[
      
   ],
   "postProcesses":[
      
   ],
   "sounds":[
      
   ]
}
4

My reply was removed by the spam filter for some reason.
I wrote that maybe it’s related to my babylon files then. I see there is a uniqueId identifier and there might be some overlap.

5

Try to set autoClear to false in your files and see if that helps.

6

That didn’t work.
Fortunately, it seems changing all the uniqueId fields in one file to be different than the other worked.
I guess this sort of makes sense but I don’t see any way to specify this id anywhere when creating models or exporting?

7

After you created an object (node, mesh, …), a uniqueId is automatically set, but you can change it afterwards just by doing obj.uniqueId = 1234.

Changing the uniqueId values directly in the json file may be a bit risky, because the .babylon loader is using these ids as references to other objects. So, if you change the uniqueId of an object, you should make sure to also change the references other objects would have to this object… For eg, the mesh object stores a reference to its material through the material.uniqueId value.