Parsing Json File

Questions
,
1

Hello,

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

2

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?

3 
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
      actions.actions[actionName].setLoop(THREE.LoopOnce);

      actions.actions[actionName].play();

      // Start after number of seconds (should have play before it)
      actions.actions[actionName].startAt(1);
    }
  });

  

  return (
    <group
      ref={group}
      {...props}
      dispose={null}
      animations={props.glb.animations}
    >
      <primitive object={props.glb.scene} />

    </group>
  );
}

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 && object.name === 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

4

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:

https://threejs.org/docs/#api/en/loaders/ObjectLoader

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

5

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

otherwise,

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