Parsing Json File


I am learning react three fiber, i wanted to ask how can i load and parse a JSON file as an animation and assign it for an onclick on a certain mesh, can anyone help with this

Best Regards

is this something that vanilla can do ootb? in that case you do it the same way. is there perhaps a bit of code you could show?

export function Model(props) {
  const group = useRef(null);
  const actions = useAnimations(props.glb.animations, props.glb.scene);
  // console.log(sprayAnimation);
  useEffect(() => {
    for (const actionName in actions.actions) {
      // Pause when finished
      actions.actions[actionName].clampWhenFinished = true;

      // Play once


      // Start after number of seconds (should have play before it)


  return (
      <primitive object={props.glb.scene} />


In the model i have a certain mesh that i want to have an onclick interaction on it, and when its pressed i want it to play the JSON file animation that i have in my public folder

i created this function to find and get the desired mesh

function getMeshByName(scene, name) {
  let targetMesh = null;

  scene.traverse((object) => {
    if (object instanceof Mesh && === name) {
      targetMesh = object;

  return targetMesh;

But how can i assign an onclick interaction to it and parse the JSON file as an animation to it

Where are you getting your JSON from ?

Nowadays we tend to use GLTF format for loading / exporting animations…

I think for the the threejs JSON format though, you can use:

To load it… and then pull the animations out once it’s loaded.

if you want pointer events on particular contents of the scene it is best to use GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components


<primitive onPointerOver={e => ...} onPointerOut={...} onClick={...}