How can I import a glb model from Blender with Shape Keys, into ThreeJS/ react-three-fiber?

Question

TLDR; Importing a glb model from Blender into my react-three-fiber app breaks with the following error, when the exported model has multiple Shape Keys:

TypeError: Cannot read properties of undefined (reading 'length')

---

Summary If I export the model with no Shape Keys, or just the 'Basis' Shape Key, the model loads fine in r3f, but breaks as soon as I export it with a second one. I'm wondering if there's something I need to do in Blender before exporting, or something I need to do after importing into r3f.

Just as FYI, the reason I want to export an object with multiple Shape Keys is so that I can animate the shape of a mesh. So if the Shape Key approach isn't viable in ThreeJS, any alternative suggestions would also be much appreciated!

---

Steps taken

1. Create a new Blender file with a cube mesh (like this)
2. Add two shape keys to the cube (like this)
3. Export the cube as .glb (like this)
4. Convert glb to jsx with npx gltfjsx cube.glb
5. The following component is generated, and breaks

import React, { useRef } from "react";
import { useGLTF } from "@react-three/drei";

export const Cube = (props) => {
  const { nodes, materials } = useGLTF("/cube.glb");
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes.Cube.geometry} material={nodes.Cube.material} />
    </group>
  );
};

useGLTF.preload("/cube.glb");

TypeError: Cannot read properties of undefined (reading 'length')

---

I've tried exporting the same glb file but without the shape keys, and this loads properly. I've also tried commenting out the <mesh geometry={nodes.Cube.geometry}... /> component, so I believe something is going wrong with the cube's geometry.

Thanks to anyone taking the time to read this.

Answer 1

You could either specifically add morphTargetDictionary and morphTargetInfluences

<mesh
   geometry={nodes.Cube.geometry}
   morphTargetDictionary={nodes.Cube.morphTargetDictionary}
   morphTargetInfluences={nodes.Cube.morphTargetInfluences}
/>

or just supply initial args and it will add for you

<mesh args={[nodes.Cube.geometry]} />