Three error thrown when attempting to use instanced + transformed gltf jsx component.

[rogersanick]

Hey everyone,

I'm trying to use an instanced / transformed gltfjsx component generated using this command:

gltfjsx accosisting_squeemer_v2.glb -t -I

The outputted code is attached below along with the source file. Unfortunately rendering the component in the scene using:

<Instances>
    <Model />
</Instances>

Throws the following error:

three.module.js:17683 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at Object.update (three.module.js:17683:42)
    at setProgram (three.module.js:29885:18)
    at WebGLRenderer.renderBufferDirect (three.module.js:28773:20)
    at renderObject (three.module.js:29465:11)
    at renderObjects (three.module.js:29434:6)
    at renderTransmissionPass (three.module.js:29370:4)
    at renderScene (three.module.js:29299:42)
    at WebGLRenderer.render (three.module.js:29121:5)
    at render$1 (index-673ef987.esm.js:1514:61)
    at loop (index-673ef987.esm.js:1538:19)

This is the generated code:

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.2.12 accosisting_squeemer_v2.glb -t -I 
Files: accosisting_squeemer_v2.glb [1.1MB] > accosisting_squeemer_v2-transformed.glb [167.83KB] (85%)
*/

import * as THREE from 'three'
import React, { useRef, useMemo, useContext, createContext } from 'react'
import { useGLTF, Merged } from '@react-three/drei'
import { GLTF } from 'three-stdlib'

type GLTFResult = GLTF & {
  nodes: {
    body: THREE.Mesh
    sclera: THREE.Mesh
    cornea: THREE.Mesh
    pupil: THREE.Mesh
  }
  materials: {
    ['Material.009']: THREE.MeshPhysicalMaterial
    ['Material.005']: THREE.MeshStandardMaterial
    ['Material.003']: THREE.MeshPhysicalMaterial
    ['Material.006']: THREE.MeshStandardMaterial
  }
}

type ContextType = Record<string, React.ForwardRefExoticComponent<JSX.IntrinsicElements['mesh']>>

const context = createContext({} as ContextType)
export function Instances({ children, ...props }: JSX.IntrinsicElements['group']) {
  const { nodes } = useGLTF('/accosisting_squeemer_v2-transformed.glb') as GLTFResult
  const instances = useMemo(
    () => ({
      Body: nodes.body,
      Sclera: nodes.sclera,
      Cornea: nodes.cornea,
      Pupil: nodes.pupil,
    }),
    [nodes]
  )
  return (
    <Merged meshes={instances} {...props}>
      {(instances: ContextType) => <context.Provider value={instances} children={children} />}
    </Merged>
  )
}

export function Model(props: JSX.IntrinsicElements['group']) {
  const instances = useContext(context)
  return (
    <group {...props} dispose={null}>
      <instances.Body position={[-0.126, 0.053, -0.44]} rotation={[0, 0, 0.651]} scale={0.27} />
      <instances.Sclera position={[0.017, -0.054, 0.156]} rotation={[-0.007, -0.019, -2.516]} scale={37.039} />
      <instances.Cornea position={[0.015, -0.054, 0.234]} rotation={[-0.007, -0.019, -2.516]} scale={37.039} />
      <instances.Pupil position={[0.015, -0.054, 0.234]} rotation={[-0.007, -0.019, -2.516]} scale={37.039} />
    </group>
  )
}

useGLTF.preload('/accosisting_squeemer_v2-transformed.glb')

And this is the generated file:

[Uploading accosisting_squeemer_v2-transformed.glb.zip…]()

[drcmda]

it has to be

import { Instances, Model } from './foo'

<Instances>
  <Model />

[rogersanick]

Apologies, that was a typo on my end. I've updated the code snippet.

  <Instances>
      <Model />
  </Instances>

[gourangc]

Hi @rogersanick, I am facing the same issue. Could you let me know if you were able to resolve the issue?

[rogersanick]

Hey @gourangc - no answer yet but I'll post here if I'm able to figure it out / get help.

[aish96]

hey @rogersanick, I faced this issue today and I was able to fix it by adding morphTargetDictionary and morphTargetInfluences to skinnedMesh for a few layers of my model in the generated jsx files. Looks like previously gltfjsx added it itself and something changed recently. I hope its the same issue for you as well and this fixes it.

[rogersanick]

Hey @aish96 - thank you very much for your response! I'm not super familiar with morphTargetDictionary or morphTargetInfluences - any chance you could post a snippet?

[gourangc]

Thanks, @aish96, for the solution. I also found the same solution in one of the tutorials I was following online. It is working now. @rogersanick Please look at the example code here. It will help you with the implementation. https://github.com/wass08/r3f-lipsync-tutorial/blob/main/src/components/Avatar.jsx

[Aziz-kefi]

Facing the same problem without solution , did not know how to use morphTargetDictionary and morphTargetInfluences , any help please?

[rogersanick]

@gourangc - thank you very much for the link. I've given it a read and I'm still not completely sure how to apply this to my own instanced GLTF models. Further clarification would be greatly appreciated! Is this a workaround? Or expected behavior?

[aish96]

Hi @rogersanick @Aziz-kefi, looks like there is an issue with the latest version of the library. I have seen quite a lot of people facing this error. Until this get fixed, I would suggest using ttps://gltf.pmnd.rs/, based on top of this library or an older version of this library. Hope this helps.

[disconsolate]

It seems there is an issue with the latest versions. I solved the issue using an older version (6.2.3). I hope this can resolve yours too

[RuanAzevedo]

I had this issue today and fixed using an older version (6.2.11). It seems broken from the 6.2.12 and later.

[ebowwar]

Solution

{package_manager} install gltfjsx@6.2.12

{package_manager} install read-pkg-up

{package_manager} gltfjsx -t {model_path}