R3F: Primitives without 'object' are invalid!

Questions
,
1

I get the following error message when reloading the page with the canvas on it.
" R3F: Primitives without ‘object’ are invalid!"

function DroneModel() {
  const file_loaded = useGLTF('/model.gltf');

    const model = file_loaded.scene.children[0]

    return (
        <primitive 
        object={model}
        dispose={null}
        />
    );
}

To me it seems that the loader does not load the full model on the second render.

At the first render file_loaded.scene.children[0] chain is loaded all the way. However, on the second render it only seems to load “file_loaded.scene” and children is none.

Anyone has a guess how to fix this?

2

have you tried useGLTF.preload?

function DroneModel() {
  const file_loaded = useGLTF('/model.gltf');

    const model = file_loaded.scene.children[0]

    return (
        <primitive 
        object={model}
        dispose={null}
        />
    );
}

useGLTF.preload('/model.gltf')

also scene.children[0] is unpredictable as it can return a different child each time the model is loaded… it’s much more stable to get children by name using…

const { nodes, materials } = useGLTF('/model.gltf');
const model = nodes['childName'] //eg... nodes.myObject
3

Thanks, getting the child by name solved my issue.

1 Like
4

There’s also gltfjsx, which is probably what you want since you are trying the out contents declaratively. GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components

1 Like