Uncaught TypeError: objectInfluences is undefined

This is my first day using gltfjsx and I got this error immediately. I haven't modified any code.

I'm using vanilla jsx.

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

export function Avatar(props) {
  const { nodes, materials } = useGLTF("models/khun.glb");
  return (
    <group {...props} dispose={null}>
      <primitive object={nodes.Hips} />
      <skinnedMesh
        geometry={nodes.Wolf3D_Hair.geometry}
        material={materials.Wolf3D_Hair}
        skeleton={nodes.Wolf3D_Hair.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Glasses.geometry}
        material={materials.Wolf3D_Glasses}
        skeleton={nodes.Wolf3D_Glasses.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Body.geometry}
        material={materials.Wolf3D_Body}
        skeleton={nodes.Wolf3D_Body.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Bottom.geometry}
        material={materials.Wolf3D_Outfit_Bottom}
        skeleton={nodes.Wolf3D_Outfit_Bottom.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Footwear.geometry}
        material={materials.Wolf3D_Outfit_Footwear}
        skeleton={nodes.Wolf3D_Outfit_Footwear.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Top.geometry}
        material={materials.Wolf3D_Outfit_Top}
        skeleton={nodes.Wolf3D_Outfit_Top.skeleton}
      />
      <skinnedMesh
        geometry={nodes.EyeLeft.geometry}
        material={materials.Wolf3D_Eye}
        skeleton={nodes.EyeLeft.skeleton}
      />
      <skinnedMesh
        geometry={nodes.EyeRight.geometry}
        material={materials.Wolf3D_Eye}
        skeleton={nodes.EyeRight.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Head.geometry}
        material={materials.Wolf3D_Skin}
        skeleton={nodes.Wolf3D_Head.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Teeth.geometry}
        material={materials.Wolf3D_Teeth}
        skeleton={nodes.Wolf3D_Teeth.skeleton}
      />
    </group>
  );
}

useGLTF.preload("models/khun.glb");

How I use it

import { OrbitControls } from "@react-three/drei";
import { Avatar } from "./Avatar";

export const Experience = () => {
  return (
    <>
      <OrbitControls />
      <Avatar />
    </>
  );
};

File paths are correct

Welcome to gltfjsx!

I have created a quick working demo of this project.

Github: https://github.com/justindhillon/gltfjsx-issue--249 Demo: https://gltfjsx-issue-249.vercel.app/

Screencast from 2024-03-10 23-57-11.webm

Your implementation lacks <Canvas>. Here is how it is supposed to look like:

"use client"

import { Canvas } from "@react-three/fiber";
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";

import { Avatar } from "./Avatar";

export default function Experience() {
  return (
    <Canvas>
      <OrbitControls />
      <Avatar />
      <PerspectiveCamera makeDefault position={[30, 30, 20]} />
    </Canvas>
  );
}

It could always be something wrong with your model or rest of your project files. If you still have issues, link your github repo or send me questions via linkedIn. I'm always happy to help!

LinkedIn: https://www.linkedin.com/in/justin-dhillon/

Welcome to gltfjsx!

I have created a quick working demo of this project.

Github: https://github.com/justindhillon/gltfjsx-issue--249 Demo: https://gltfjsx-issue-249.vercel.app/ Screencast.from.2024-03-10.23-57-11.webm

Your implementation lacks <Canvas>. Here is how it is supposed to look like:
"use client"

import { Canvas } from "@react-three/fiber";
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";

import { Avatar } from "./Avatar";

export default function Experience() {
  return (
    <Canvas>
      <OrbitControls />
      <Avatar />
      <PerspectiveCamera makeDefault position={[30, 30, 20]} />
    </Canvas>
  );
}
It could always be something wrong with your model or rest of your project files. If you still have issues, link your github repo or send me questions via linkedIn. I'm always happy to help!

LinkedIn: https://www.linkedin.com/in/justin-dhillon/

Thanks for your time. My code works now but this is how I'm done. Instead of using cli:

npx gltfjsx <path-to-my-.glb-file>

I uploaded the same .glb file to https://gltf.pmnd.rs/ and it generates the very similar code, and that code works. Comparing the two code, I found that in skinnedMesh generated by cli doesn't come up with ''name'' and other props

<skinnedMesh 
  geometry={nodes.EyeLeft.geometry} 
  material={materials.Wolf3D_Eye} 
  skeleton={nodes.EyeLeft.skeleton} 
/>

The one generated by that website comes up with this:

<skinnedMesh
          name="EyeLeft"
          geometry={nodes.EyeLeft.geometry}
          material={materials.Wolf3D_Eye}
          skeleton={nodes.EyeLeft.skeleton}
          morphTargetDictionary={nodes.EyeLeft.morphTargetDictionary}
          morphTargetInfluences={nodes.EyeLeft.morphTargetInfluences}
        />

I'm not sure but I think that's the case

pmndrs / gltfjsx

Uncaught TypeError: objectInfluences is undefined #249