Unable to render multiple Models on a map due to clone error

[harit-m-kumar]

I was trying to render multiple objects as Model on top on a surface Model. My code for rendering the model goes like this -

const getEquipmentModelsOnMap = () => { let equipmentModels = []; for (let [index, item] of props.equipmentModelsOnMap.entries()) { equipmentModels.push( <Model id={"id_of_model" + props.changeIndex + "itemNo" + index} key={"model" + props.changeIndex + "itemNo" + index} alpha={0.8} alphaIndex={0.8} rootUrl={props.rootURLforEquipments + "/Equipments/"} sceneFilename="XXWY_UI.obj" scaleToDimension={50} rotation={new Vector3(0, 1.26, 0)} OPTIMIZE_WITH_UV={true} position={item.position} layerMask={index}

); } return equipmentModels; };

When the array "equipmentModelsOnMap" has only one element it is rendering properly. But when i add one more element to the array. I am getting a clone error as message -

UpdateInstance.ts:32 Uncaught TypeError: t.value.clone is not a function

Detailed Error-

_react-reconciler.development.js:9747 The above error occurred in the component:

at abstractMesh
at Ig (https://localhost:3000/static/js/bundle.js:848756:15)
at Suspense
at TerrainModel (https://localhost:3000/static/js/bundle.js:55092:76)

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-reconciler.development.js:9747 update.callback @ react-reconciler.development.js:9780 callCallback @ react-reconciler.development.js:4279 commitUpdateQueue @ react-reconciler.development.js:4300 commitLayoutEffectOnFiber @ react-reconciler.development.js:14904 commitLayoutMountEffects_complete @ react-reconciler.development.js:16290 commitLayoutEffects_begin @ react-reconciler.development.js:16276 commitLayoutEffects @ react-reconciler.development.js:16214 commitRootImpl @ react-reconciler.development.js:18945 commitRoot @ react-reconciler.development.js:18811 performSyncWorkOnRoot @ react-reconciler.development.js:18215 flushSyncCallbacks @ react-reconciler.development.js:2936 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533

UpdateInstance.ts:32 Uncaught TypeError: t.value.clone is not a function at Bg (UpdateInstance.ts:32:1) at UpdateInstance.ts:130:1 at Array.forEach () at xg (UpdateInstance.ts:126:1) at createInstance (ReactBabylonJSHostConfig.ts:673:1) at completeWork (react-reconciler.development.js:10851:1) at completeUnitOfWork (react-reconciler.development.js:18725:1) at performUnitOfWork (react-reconciler.development.js:18697:1) at workLoopSync (react-reconciler.development.js:18597:1) at renderRootSync (react-reconciler.development.js:18565:1)_

[harit-m-kumar]

This is a screenshot of the error

[brianzinn]

it looks like your "item.position" is not a babylon.js Vector3 object.

[brianzinn]

closing from inactivity. there is a community proposal that will help loading multiple models 🤞 https://github.com/BabylonJS/Babylon.js/issues/14567