UseFrame does not get exported by GLTFExporter #2380

dedlockdave · 2022-07-18T16:31:16Z

dedlockdave
Jul 18, 2022

"@react-three/fiber": "^8.2.0",
"three": "^0.142.0",

Hello I am trying to export a model containing animations. My model uses the useFrame hook and manipulates the ref like so

const TopicBadge = forwardRef((props, ref) => {
  let {playlistBody, hasBadge} = useSelector(s => s.playlist)

  return (
          <Canvas>
            <ShapeModel title={playlistBody.title} ref={ref} />
          </Canvas>
  );
})

export const ShapeModel = React.forwardRef(({title}, ref ) => {
  const meshTurnRef = useRef()
  useFrame(() => {
    meshTurnRef.current.rotation.y += 0.01
  })
  
  return (
    <group ref={ref}>
      <Html fullscreen>
          <div className='text-right w-1/3 ml-16 mt-8'>
              <h1 className='text-sm text-plum-green'>{title}</h1>
          </div>
      </Html>
      <mesh matrixAutoUpdate={true} position={[0, 0, 2.4]} ref={meshTurnRef}>
        <torusBufferGeometry args={[1, .48, 16, 32]} attach="geometry" />
        <meshStandardMaterial roughness={1} fog={true} color={"#049ef4"} attach="material" />
      </mesh>

      <directionalLight position={[1, 1, 0]} />
      <directionalLight position={[0, 0, 3]} />
  </group>
  )
})

I then export the model with the GLTFExporter in a parent component

const exporter = new GLTFExporter()
  let saveRef = useRef()
  const onSavePlaylist = async () => {
    try {
      exporter.parse( saveRef.current, async function ( gltf ) {
          // saveRef.current does not have animations     
      }
    }

I see the saveRef.current does not have the animations.

Is there documentation or a recommended way to save animations for importing into a model later? Seems all documentation shows this as the recommended way so I think this is a bug

CodyJasonBennett · 2022-07-21T16:10:36Z

CodyJasonBennett
Jul 21, 2022
Maintainer

GLTFExporter does not export react components but threejs objects. This would have to be solved by a data-structure of your own you can put into userdata or the usage of AnimationClip:

https://codesandbox.io/s/gltf-export-w-animation-f3cyp?file=/index.js

0 replies

dedlockdave · 2022-07-23T06:25:37Z

dedlockdave
Jul 23, 2022
Author

hmm so i would have to recreate the animation that I created in my useFrame hook in the export function? Could the client library include that

I think the gltf data structure created by the react-three fiber library is a little different than the one created with standard three js.

When attempting to use this line on your linked sandbox const [horse] = gltf.scene.children; I am running into an error TypeError: Invalid attempt to destructure non-iterable instance. I see there is no gltf.scene on the gltf file I am parsing but there is a gltf.scenes[0].

0 replies

drcmda · 2022-07-23T08:22:26Z

drcmda
Jul 23, 2022
Maintainer

I think the gltf data structure created by the react-three fiber library is a little different than the one created with standard three js.

r3f is just a renderer, you are using and writing plain threejs. there is no difference between any of threejs primitives. gltfexporter is something that threejs itself offers, fiber has nothing to do with it. perhaps you are using gltfexporter from three-stdlib instead of three/jsm/... and stdlib is perhaps a little out of date but otherwise, react cannot possibly change how any of this works.

as for animations, gltf work with time frames, they are different from controlling an object with code. likewise in plain threejs, if you animate something with a Math.sin function or whatever, none of it can be reflected in the exporter. unless you create time frames for it manually. imo fiber could actually do it since it is deterministic, you can run frames with the advance function for instance.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

UseFrame does not get exported by GLTFExporter #2380

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

UseFrame does not get exported by GLTFExporter #2380

Uh oh!

Uh oh!

dedlockdave Jul 18, 2022

Replies: 3 comments

Uh oh!

CodyJasonBennett Jul 21, 2022 Maintainer

Uh oh!

dedlockdave Jul 23, 2022 Author

Uh oh!

Uh oh!

drcmda Jul 23, 2022 Maintainer

dedlockdave
Jul 18, 2022

CodyJasonBennett
Jul 21, 2022
Maintainer

dedlockdave
Jul 23, 2022
Author

drcmda
Jul 23, 2022
Maintainer