pmndrs / gltfjsx Goto Github PK

I believe since gltfjsx parses coordinates out to two decimals, (10.00) it causes objects to move in models with larger scales. Normally these minute movements wouldn't be noticeable, but in my case it causes architectural elements, like sidewalks or site maps to be offset by a few inches, which results in gaps in my model.

Images attached:
Don Mccurdy GLTF Viewer

GLTF-JSX

Using gltfjx sometimes breaks some objects positions.

Probably related to #76 and #62

Minimal repo: https://codesandbox.io/s/quizzical-kapitsa-ugjgg

You can see the top canvas renders the JSX file, while the bottom canvas renders the GLTF as a primitive object.

The primitive object is 100% correct, but the JSX one is just a little bit messed up. Of the 20 parts, 2 or 3 are not in their correct position. Note: both canvases use the exact same GLTF file.

What even stranger: The GLTF file works fine in the online viewer ( https://gltf.pmnd.rs/ )

Any help on how to work around that would be appreciated.

Hi,

Im trying to load the converted scene_draco .glb file into a react-native project. Im using the unimodules+expo-gl+expo-three packages to render the model. Everything works fine as long as the .glb file doesn't contain any textures. But, when I add textures I get the following error:

Creating blobs from "ArrayBuffer" and "ArrayBufferView" are not supported

Is anyone familiar with this or knows a workaround?

Thanks

Would resolve this issue in particular: AndrewPrifer/react-three-editable#49. @drcmda if there are no caveats to this, I could open a pull request, however I imagine to support cases when a ref is needed to the group inside the component as well, we would have to assume something like react-merge-refs being installed as a dependency.

We've run into an issue that occurs after converting a .glb to jsx elements. We got a model where 90% of it is converted just fine. However, recently we added animated character models that have some linear movement animations. They are converted to a bunch of skinnedMeshes and have a geometry, a material and a skeleton attached as properties.

When viewing the .glb in the Threejs or in Don McCurdy's editor, the character models are positioned just fine (apart from their poses). However when converting the model to jsx elements and rendering it through fiber all parts of the character model (skeleton, bones, textures) seem to have "exploded" and are floating in space around the rest of the scene. See screenshot attached:

https://threejs.org/editor/

https://gltf-viewer.donmccurdy.com/

Browser

As you can see, all models somehow have been displaced. Is this something that could have been caused by gltfjsx, or would this be something that is inherently wrong with the model.

I'm working on a codepen, will add that later.

Exporting my glb file and running the script renders the following file as output:

/*
auto-generated by: https://github.com/react-spring/gltfjsx
*/

import * as THREE from 'three'
import React, { useRef } from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

export default function Model(props) {
  const group = useRef()
  const { nodes, materials } = useLoader(GLTFLoader, '/sheep.glb')
  return <group ref={group} {...props} dispose={null}></group>
}

Though, I do notice that my glb file is quite small, and I'm assuming my export is the actual cause of the problem. Is there a particular render or scene setting I should be making sure is true before I export?

Maybe we should use babel ast to generate code?

I use the robot's glb file from https://threejs.org/examples/webgl_animation_skinning_morph.html

It can be correctly rendered (include animations) in https://gltf-viewer.donmccurdy.com/
But when I use gltfjsx and react-three-fiber, the robot's hand have something wrong.

I notice that the glb file contain some errors when validate by https://github.khronos.org/glTF-Validator/
But I don't know how to fix this problem.

Robot.zip

Receiving this message from the console when trying to run the gltfjsx command both locally and remotely. Seems it has to do with jsdom's whatwg-url dependency. It also seems to work only when running version 1.0.0 of gltfjsx

Cannot read property 'some' of undefined

I have modified my gltf file converted to jsx and now want to convert it back to gltf? How can I do it ?

cant find react-three programm

this not work

but if i ass npx before @react-three/gltfjsx, all works correctly

I'm trying to convert this gltf model to jsx component.

I tried to set --compress=false, but it doesn't help. Whatever I do, it removes names from meshes.

Is there problem with model itself or Have I ran the npx command wrong?

I tried running both the js file (created after running npx gltfjsx) and the original glb model in react and the particles on the js file one has the wrong positions.

For the js one, I used
import Model from "./Donut.js"

and for the glb one I used:
function Model(props) { const { scene, materials } = useGLTF("donut.glb") return <primitive object={scene} />; }

The auto-import tag is directing to the wrong directory.

Error: import { useGLTF } from "@react-three/drei/useGLTF";

Fixed: import { useGLTF } from "@react-three/drei/core/useGLTF";

The useGLTF file has been changed to inside of @react-three/drei/core

Thanks.

This is caused when running npx @react-three/gltfjsx ...

Running npx [email protected] ... works without errors

İssue :
Can't resolve useAnimations in '@react-three/drei/useAnimations'

Fixed:

import { useAnimations } from '@react-three/drei/core/useAnimations'

When I take my gltf file into gltfjsx, it happen.

$ npx gltfjsx input.gltf Output.js

ArrayBuffer { byteLength: 32830 }
SyntaxError: The string did not match the expected pattern.

I checked the file on a validator below, it says "valid".
http://github.khronos.org/glTF-Validator/

Please give me a clue.

I like this tool that integrates with both react and gltf so well. But I cannot find an option in the cli command that outputs a typescript model, nor can I find a solid example of manually porting the output to typescript.

The following is the only problem left unsolved when I try to manually port the output into typescript. Please can anyone shine a light on the solution or even provide a working example.

Environment

• node 14.0.0
• react 16.13.1
• three 0.115.0
• gltfjsx latest using npx

Currently I'm developing 3d game with multiple gtlf files loaded locally with Gatsby.js and Typescript.
I'm using Blender to export models, one per file.
I need to reload the page a lot to see my changes, so often, there is some network glitch, which prevents one of gltf file from loading, and crashes the app.
I can setup ErrorBoundary, but that is leaving a user with network issues with fallback, but I want to escape to load the model in first place.

I've tried to load models with import { useGLTF } from '@react-three/drei/useGLTF', but this method does not allow to change materials, and there is a lot of cloning happening to reuse same model in multiple positions in same react-three-fiber scene.

I've tried gltfjsx, and it does allow to provide materials to the <mesh/> as I need, but <mesh/> getting prop geometry as instance of BufferGeometry type, and I can't simply extract vertices and faces to const variables, to use in new BufferGeometry() or `.

I do not want to use materials from the model at all.

I understand that JS bundle size will grow, but if I we get rid of <Suspense/>, I guess we could pre-render stuff offline.

import * as React from 'react'
import { useGLTF } from '@react-three/drei/useGLTF'

import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'

type GLTFResult = GLTF & {
  nodes: {
    model: THREE.Mesh
  }
  materials: {
    ['Material.001']: THREE.MeshStandardMaterial
  }
}

function Model(props: JSX.IntrinsicElements['group']) {
  const group = React.useRef<THREE.Group>()

  const { nodes } = useGLTF('/pieces/model.gltf') as GLTFResult

  const model = nodes.model

  console.info(model.geometry)

  return (
    <group ref={group} {...props} dispose={null}>
      <mesh geometry={nodes.model.geometry} rotation={[0, 0, -Math.PI]} >
        <meshBasicMaterial color="peachpuff" opacity={0.5} transparent />
      </mesh>
    </group>
  )
}

export default React.memo(Model)

useGLTF.preload('/pieces/model.gltf')

Would be great if model could be pre-parsed with gltfjsx

Thank you for great work, I think my attempt with 3d in React would stuck again today, if I did not found your library, It did miracle, and now I can dynamically change materials of my 3d models!

maybe we should add some decomposition to the generated code?

for example, in addition to the default export, also export each model and texture separately, by name.

Hi all. Thanks for this library.

Previously, I've been using quite some Three.js and now want to combine it with react. Everything works fine. When I want to convert for example the Buggy.gltf from https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Buggy/glTF, it works perfectly and I get the .js file. Once I placed this file in my src/components/Models and use it in my program, I get this error:

Uncaught Invalid typed array length: 1980
index.js:1 The above error occurred in the component:

at Model (http://localhost:3000/static/js/main.chunk.js:422:69)
at Suspense
at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:11709:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console. @ index.js:1
react-reconciler.development.js:2559 Uncaught Invalid typed array length: 1980
index.js:1 The above error occurred in the component:

at Canvas (http://localhost:3000/static/js/vendors~main.chunk.js:11481:3)
at Loading (http://localhost:3000/static/js/main.chunk.js:291:1)
at header
at div
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console. @ index.js:1
react-dom.development.js:11340 Uncaught Invalid typed array length: 1980

In the following I will include the code and the layout of my app:

Hey there, absolutely love the work that's being done with this project and react-three-fiber. Thank you so much!

I'm trying to convert a gltf file but I always run into the same error.

THREE.BufferGeometry: .addAttribute() has been renamed to .setAttribute().
THREE.BufferGeometry: .addAttribute() now expects ( name, attribute ).
...
...
THREE.BufferGeometry: .addAttribute() has been renamed to .setAttribute().
THREE.BufferGeometry: .addAttribute() now expects ( name, attribute ).
TypeError: Cannot read property 'array' of undefined
    at /Users/simonhales/.npm/_npx/10218/lib/node_modules/gltfjsx/bin/GLTFLoader.js:1171:57
    at async Promise.all (index 0)
    at async Promise.all (index 1)
loader failed

The command I'm running is npx gltfjsx Banana.gltf Banana.js --animation

I've uploaded my files here https://drive.google.com/drive/folders/1pE7XhITz5oE-WrQKoRPva6bQ24Mmacx8?usp=sharing

Banana.gltf is exported straight from Blender.

bananaDraco.gltf has been converted via gltf-pipeline

I've also included the original Blender file.

I verified that the files could be viewed via https://gltf-viewer.donmccurdy.com/

I'm not the most experienced dev (especially when it comes to this kind of stuff), but I have some time off at the moment so I shall clone this repo and see if I'm able to make any progress with determining the issue.

Note: I tested using the example .glb file in this repo, which had no issues.

Edit:

Just to add, I'm able to load Banana.gltf just fine via the example from the react-three-fiber readme.

import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
...
const gltf = useLoader(GLTFLoader, url)
...

This is my project https://github.com/sourabpramanik/trial and taking references from this video https://www.youtube.com/watch?v=2pUzJOfekVE&t=1025s but the lines connecting the two points are not dashed and not even animating. I am using same configuration but still it's not happening.
@drcmda

@drcmda
I was watching a video https://www.youtube.com/watch?v=2pUzJOfekVE&t=1025s by Yuri Artyukh and in place of using a simple sphere I wanted to use a gltf model of earth like you can see in my repo https://github.com/sourabpramanik/fff, but I don't know how to setup the line from Three like Yuri did to connect the coordinates in my gltfjsx can you help me.
Here is the javascript https://github.com/sourabpramanik/fff/blob/main/src/component/Planet.js also if you have any model to demonstrate it will be easy.

Hello, first I want to congratulate you on the tool. Secound I'm using Next.js and charge this compilated component

/*
auto-generated by: https://github.com/react-spring/gltfjsx
*/

import * as THREE from 'three'
import React, { useRef } from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

export default function Model(props) {
  const group = useRef()
  const { nodes, materials } = useLoader(GLTFLoader, '/clothw.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh material={materials.lambert2SG} geometry={nodes.Object_3.geometry} scale={[0.03, 0.03, 0.03]} />
      <mesh material={materials.lambert2SG} geometry={nodes.Object_4.geometry} />
    </group>
  )
}

But I have this error:

1 | module.exports = require("three/examples/jsm/loaders/GLTFLoader");

webpack_require
./webpack/bootstrap:21

18 | // Execute the module function
19 | var threw = true;
20 | try {
|> 21 | modules[moduleId].call(module.exports, module, module.exports, webpack_require);
| ^ 22 | threw = false;
23 | } finally {
24 | if(threw) delete installedModules[moduleId];

I’ve used this tool many times and it somehow doesn't work. I believe this has to do with the update. Now that it has been updated it doesn’t work.

Normally I place my .gltf in my public folder and cd to the public folder. Then I used to run “npx @react-three/gltfjsx [filename.gltf]”, but now the format has changed to just “npx gltfjsx”. Even when I change the command to “npx gltfjsx [filename.gltf]” it doesn’t work. I’ve tested multiple .gltf files with the same result of an Unexpected Token ‘.’. It seems the update broke this useful command. Also the Twitter link at the top links to the old way, it's misleading to new users.

Appologies if this is the wrong place to ask this, but I'm a bit stuck.

I have a situation where I have many GLTF files that use the same bones and animations, so I have explored the bones and animations as an FBX file to save space (instead of duplicating the animations and bones across all my GLTF files).

I tried to follow this approach but that only uses a GLTF file.

Is it possible to do this?

My code looks something like this:

function Avatar({ settings = {}, ...props }) {
  const group = React.useRef();
  const actions = React.useRef();
  const [mixer] = React.useState(() => new THREE.AnimationMixer());
  const { animations } = useFBX("/assets/models/walk-animation.fbx");
  const { nodes, materials } = useGLTF("/assets/models/avatar.glb");

  useFrame((state, delta) => mixer.update(delta));

  // I'd like to load the animations and bones from FBX and have it applied to GLTF
  React.useEffect(() => {
    actions.current = {
      walk: mixer.clipAction(animations[0], group.current),
    };
    return () => animations.forEach((clip) => mixer.uncacheClip(clip));
  }, [animations, actions, mixer, group]);

  React.useEffect(() => {
    materials.Hair.color.set(settings.hairColor);
    materials["Hair.001"].color.set(settings.hairColor);
    materials.top.color.set(settings.topColor);
    materials.skin.color.set(settings.skinColor);
    materials.eyes.color.set(settings.eyesColor);
    materials.mouth.color.set(settings.mouthColor);
  }, [materials, settings]);

  React.useEffect(() => {
    actions.current.walk[settings.playWalk ? "play" : "stop"]();
  }, [settings, actions]);

  return (
    <group ref={group} {...props} dispose={null}>
      <mesh
        visible={settings.hairStyle === 1}
        material={materials.Hair}
        geometry={nodes.big_hair.geometry}
        position={[0, 1.56, 0]}
        rotation={[Math.PI / 2, 0, 0]}
        scale={[0.01, 0.01, 0.01]}
      />
      <mesh
        visible={settings.hairStyle === 2}
        material={materials.Hair}
        geometry={nodes.hair.geometry}
        position={[0, 1.56, 0]}
        rotation={[Math.PI / 2, 0, 0]}
        scale={[0.01, 0.01, 0.01]}
      />
      <mesh
        material={materials["Hair.001"]}
        geometry={nodes.eye_brows.geometry}
        rotation={[Math.PI / 2, 0, 0]}
        scale={[0.01, 0.01, 0.01]}
      />
      <mesh
        material={materials.top}
        geometry={nodes.top.geometry}
        rotation={[Math.PI / 2, 0, 0]}
        scale={[0.01, 0.01, 0.01]}
      />
      <mesh
        material={materials.Shorts}
        geometry={nodes.shorts.geometry}
        rotation={[Math.PI / 2, 0, 0]}
        scale={[0.01, 0.01, 0.01]}
      />
      <mesh
        material={materials.Shoes}
        geometry={nodes.shoes.geometry}
        rotation={[Math.PI / 2, 0, 0]}
        scale={[0.01, 0.01, 0.01]}
      />
      <mesh
        material={materials.skin}
        geometry={nodes.skin.geometry}
        rotation={[Math.PI / 2, 0, 0]}
        scale={[0.01, 0.01, 0.01]}
      />
      <mesh
        material={materials.mouth}
        geometry={nodes.mouth.geometry}
        rotation={[Math.PI / 2, 0, 0]}
        scale={[0.01, 0.01, 0.01]}
      />
      <mesh
        material={materials.eyes}
        geometry={nodes.eyes.geometry}
        rotation={[Math.PI / 2, 0, 0]}
        scale={[0.01, 0.01, 0.01]}
      />
    </group>
  );
}

Howdy all, I'm pretty new to both three.js and React itself but I've been running into an issue with this package that I think it an issue on the programs side so hear me out.

I've been trying to render .gltf/.glb files via Gltfjsx and react-three-fiber and figured I'd start off with a tutorial (https://www.youtube.com/watch?v=q7yH_ajINpA) that I'd try following verbatim. Initially I was running into an import error with drei but I resolved that thanks to #67 but I'm not out of the water. Now when calling the generated component I'm getting "Error: Invalid hook call. Hooks can only be called inside of the body of a function component." on render. The crash handler doesn't seem to be a fan of the line "const { nodes, materials } = useGLTF("/kick.glb");"

Does anyone have advice on this?

Now you generate this:

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

export default function Model(props) {
  const { nodes, materials } = useGLTF('/scene.gltf')

but must this:

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

// ADD THIS
import fileUrl from './scene.gltf' // relative path to `scene.gltf` asset


export default function Model(props) {
  const { nodes, materials } = useGLTF(fileUrl)

And users can add webpack loader to convert all gltf imports to urls, and automatically compress and upload it to CDN, attach a hash to the name, add infinity caching, and whatever they want =)

Webpack will substitut all gltf imports to CDN links, and loader just load it.
Just add --local-imports flag for this behavior

Before I go ahead, I am not entirely sure if this is a fault of gltfjsx's. Although I thought I would report it just incase.

After exporting my object and rendering it I notice some grey lines appearing at the top of the model. You can see a darker artifact in the screenshot below running below the time 9.41 and it gets thinner as it goes from left to right. There's also a lighter part above it, going through the time. I have played around with a lot of the material options from threejs, although this kind of texture work is still new to me so I wasn't able to work it out.

I used this to generate the jsx:

gltfjsx iphone.glb iphone.js --compress

And the artifact:

The source model looks fine, and I checked that all the vertices align correctly on the same Z axis (it was a lot of labour lol).

And the source image:

My scene is very simple:

export const Phone = () => (
  <Canvas
    css={{
      top: 0,
      left: 0,
      width: `100%`,
      height: `100%`
    }}
    pixelRatio={devicePixelRatio}
  >
    <ambientLight intensity={0.68} />
    <pointLight position={[600, 600, 600]} intensity={0.475} />
    <Suspense
      fallback={
        <Dom>
          <div>
            Loading..
          </div>
        </Dom>
      }
    >
      <Model />
    </Suspense>
  </Canvas>
);

And my model looks like this: https://gist.github.com/bitttttten/95e792f046472dac880183af1fdfa0ee

Am I missing something? I am not sure what is causing the artifacts.

I am happy to supply more details like models, etc.!

Error

Objects are not valid as a React child (found: TypeError: e.DecoderBuffer is not a constructor). If you meant to render a collection of children, use an array instead.

Versions

• gltfjsx: 3.1.0
• Node: 14.15.1
• npm: 6.14.8
• npx: 6.14.8

Reproduce

1. Download draco model: https://github.com/pmndrs/gltfjsx/blob/master/example/public/scene_draco.glb
2. Run npx gltfjsx scene_draco.glb --draco
3. Note above error

Works as expect on non-draco models like: https://github.com/mrdoob/three.js/blob/dev/examples/models/gltf/Flamingo.glb

Hi!
First of all, thank you a lot for this beautiful work !
I would like to know is there is a reason why i should edit the react component model.js to import the gltf model instead of using directly the url as the example ?

Example : const { nodes, materials } = useLoader(GLTFLoader, '/model.gltf')

My project :
import model from "./model.gltf)
const { nodes, materials } = useLoader(GLTFLoader, model)

Thank you !
F.

I convert a .glb file with animations, here a container has animated side panels. These side panels should be attached to the body, but are looking like this

Incorrect

Using the online version here:
https://gltf.pmnd.rs/

they appear correctly:
Correct:

when i run > npx gltfjsx models/gltf/xbot.glb --root public/ --verbose`

i get this error

arning: Encountered two children with the same key, `    in App`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in ink-box (created by Box)
    in Box (created by ErrorOverview)
    in ink-box (created by Box)
    in Box (created by ErrorOverview)
    in ErrorOverview (created by InternalApp)
    in InternalApp

  ERROR  Objects are not valid as a React child (found: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
        1. You might have mismatching versions of React and the renderer (such as React DOM)
        2. You might be breaking the Rules of Hooks
        3. You might have more than one copy of React in the same app
        See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.). If you meant to render a collection of children, use an array instead.
            in ink-text (created by Text)
            in Text
            in ink-box (created by Box)
            in Box
            in App
            in App
            in InternalApp

 - 1. You might have mismatching versions of React and the renderer (such as React DOM)
 - 2. You might be breaking the Rules of Hooks
 - 3. You might have more than one copy of React in the same app
 - See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.). If you meant to render a collection of children, use an array instead.
 -     in ink-text (created by Text)
 -     in Text
 -     in ink-box (created by Box)
 -     in Box
 -     in App
 -     in App
 -     in InternalApp
 - throwOnInvalidObjectType (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:4524:15)
 - createChild (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:4757:7)
 - reconcileChildrenArray (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:5008:25)
 - reconcileChildFibers (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:5374:14)
 - reconcileChildren (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:7865:28)
 - updateHostComponent (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:8387:3)
 - beginWork$1 (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:9969:14)
 - Object.invokeGuardedCallbackImpl (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:11563:10)
 - invokeGuardedCallback (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:11740:31)
 - beginWork$$1 (node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.development.js:15778:7)

In Blender we can attach Custom Properties to meshes e.g.

If the export option Include > Custom Properties is checked, the exported gltf has field nodes.{meshIndex}.extras.Wall.

Would you mind passing this information into the generated jsx using the userData prop?

I've at least got it working locally:

// GLTFLoader.js
const meshNodes = this.json.nodes
// ...
Object.assign(c.userData, meshNodes[meshIndex].extras || {})

// gltfjsx.js
if (obj.userData) result += `userData={${JSON.stringify(obj.userData)}} `

Hi, great tool first of all!

I'm trying to convert an entire scene but I'm noticing that models are partially breaking or even being displaced. When loading the .glb model through a regular gltf loader the model stays intact (apart from some bitmap textures but that is a different issue).

I'm seeing tons of duplicate types and layer names, and I have a suspicion because these materials and meshes do not have unique names this is causing me issues.

Would it be an idea to generate unique names for meshes and materials?

This is the .glb loaded through a .gltf loader
redacted

When generated though gltfjsx. No compression, precision on a 100, with types (apologies for the different perspectives)
redacted

These are some of the types that are generated.
redacted

I fully understand that the naming issue should be solved from the model, but I'm just wondering if we could tacked this through the tool as well.

More of a question than an issue. When using it with a TS React project can't seem to get around this error - any ideas? Thanks! (Should mention that I did run it with the -t flag)

const { nodes, materials } = useGLTF('/scene.gltf');

Since this already depends on drei, we can just replace

const { nodes, materials } = useLoader(GLTFLoader, 'casio/scene.gltf', draco('/draco-gltf/'))

with

const { nodes, materials } = useGLTFLoader('casio/scene.gltf')

I currently have a NextJS setup and the default path doesn't seem to work e.g. /scene.gltf. So, I just wanted to mention that after I changed this to /public/models/gyoza/scene.gltf it loaded the model. Unfortunately, setting up an ErrorBoundary didn't really help much either.

Maybe an addition to the documentation to note this?

Hi, first thanks for all your effort to bring real time 3d to the mass 👍

I am testing this model utils with this GLTFJSX. (the link is valid for a week)

Reproduction step:

• node v12.13.0
• In a folder (not /public, just for testing), I run npx gltfjsx bottle -t

Actual behavior:

• no output
• throw a node error

Logs:

npx : 276 installé(s) en 19.537s

  ERROR  Objects are not valid as a React child (found: TypeError: Cannot read property '0' of null). If you meant to render a collection of children, use an array instead.
            in ink-text (created by Text)
            in Text (created by App)
            in ink-box (created by Box)
            in Box (created by App)
            in App (created by App)
            in App
            in InternalApp

 -     in ink-text (created by Text)
 -     in Text (created by App)
 -     in ink-box (created by Box)
 -     in Box (created by App)
 -     in App (created by App)
 -     in App
 -     in InternalApp
 - throwOnInvalidObjectType (/Users/fraktar/.npm/_npx/71090/lib/node_modules/gltfjsx/node_modules/react-reconciler/cjs/react-reconciler.development.js:4524:15)
 - createChild (/Users/fraktar/.npm/_npx/71090/lib/node_modules/gltfjsx/node_modules/react-reconciler/cjs/react-reconciler.development.js:4757:7)
 - reconcileChildrenArray (/Users/fraktar/.npm/_npx/71090/lib/node_modules/gltfjsx/node_modules/react-reconciler/cjs/react-reconciler.development.js:5008:25)
 - reconcileChildFibers (/Users/fraktar/.npm/_npx/71090/lib/node_modules/gltfjsx/node_modules/react-reconciler/cjs/react-reconciler.development.js:5374:14)
 - reconcileChildren (/Users/fraktar/.npm/_npx/71090/lib/node_modules/gltfjsx/node_modules/react-reconciler/cjs/react-reconciler.development.js:7865:28)
 - updateHostComponent (/Users/fraktar/.npm/_npx/71090/lib/node_modules/gltfjsx/node_modules/react-reconciler/cjs/react-reconciler.development.js:8387:3)
 - beginWork$1 (/Users/fraktar/.npm/_npx/71090/lib/node_modules/gltfjsx/node_modules/react-reconciler/cjs/react-reconciler.development.js:9969:14)
 - Object.invokeGuardedCallbackImpl (/Users/fraktar/.npm/_npx/71090/lib/node_modules/gltfjsx/node_modules/react-reconciler/cjs/react-reconciler.development.js:11563:10)
 - invokeGuardedCallback (/Users/fraktar/.npm/_npx/71090/lib/node_modules/gltfjsx/node_modules/react-reconciler/cjs/react-reconciler.development.js:11740:31)
 - beginWork$$1 (/Users/fraktar/.npm/_npx/71090/lib/node_modules/gltfjsx/node_modules/react-reconciler/cjs/react-reconciler.development.js:15778:7)

I'm using the default GLTF export feature from Blender to export my model that is at a scale of 18.6 and it seems to not contain any nodes or materials after converting via the gltfjsx conversion. Using react-three-fiber version ^4.0.9.

The following is what I'm seeing. What am I doing wrong?

GLB Code (when I remove spread operator and just assign a variable)

Conversion code

// Auto-generated by https://github.com/react-spring/gltfjsx

import * as THREE from 'three'
import React, { useEffect, useRef } from 'react'
import { useLoader, useFrame } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

export default function Model(props) {
  const group = useRef()
  const { nodes, materials, animations } = useLoader(GLTFLoader, '/models/round-logo.glb')

  console.log('nodes', nodes)
  return (
    <group ref={group} {...props} dispose={null}>
      <scene name="Scene">
        <mesh
          material={materials['Material']}
          geometry={nodes['Curve004'].geometry}
          name="Curve004"
          rotation={[Math.PI / 2, 0, 0]}
          scale={[10, 0, 10]}
        />
      </scene>
    </group>
  )
}

I'm having an issue with my model being distorted after turning it into a JSX component. I have one glb file with all the scene's meshes, but it seems like some of them are not being scaled/positioned correctly (At least I think that's the issue?). Not sure where exactly the problem is stemming from, just wondering if you had any insight on a possible cause?

When viewing the glb in a model viewer it appears correctly:

After creating the JSX:

PS: Thank you for your work 👍

With the --types flag, gltfjsx generates code that calls useGLTF like this:

const { nodes, materials } = useGLTF<GLTFResult>('/stuff.gltf');

This is incorrect because useGLTF accepts 0 type arguments. The fix is either to modify useGLTF to accept a GLTF-compatible type argument, or to modify the call to the following:

const { nodes, materials } = useGLTF('/stuff.gltf') as GLTFResult;

this script create Scene.js in root of my project

Not sure if Drei has changed useAnimations recently, but there seems to be a typescript error with the default gltf-jsx output for models with animations.

cd src/blender/export && npx @react-three/gltfjsx scene.gltf -r /models/

generate this:

but must this:

Firstly thank you so much for the amazing tooling.
When i run the tool the outputted js is missing the useState import
Running version 0.0.1

import * as THREE from 'three'
import React, { useEffect, useRef } from 'react'
import { useLoader, useFrame } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
  
export default function Model(props) {
  const group = useRef()
  const [gltf, objects] = useLoader(GLTFLoader, '/cameraanimation.glb', loader => {
    const dracoLoader = new DRACOLoader()
    dracoLoader.setDecoderPath('/draco-gltf/')
    loader.setDRACOLoader(dracoLoader)
  })

  const actions = useRef()
  const [mixer] = useState(() => new THREE.AnimationMixer())

Hello,
I would love to use this tool but every time I run:
npx gltfjsx scene.gltf

I get:
npx: installed 129 in 4.325s
Unexpected token

I have tested on various files, parameters, with or without putting the file in a /public subfolder.
Maybe my problem is related to the readme line You need to be set up for asset loading which I don't understand.

Thank you.

In version 0.0.1 the loader was assigning the return to const [gltf, objects] however in 0.0.2 it's assigning to const gltf.
This is then referenced in the JSX as {...gltf.__$[1].geometry}
Which causes Uncaught TypeError: Cannot read property '1' of undefined

Edit: From the console the contents of gltf are :

(2) [{…}, Array(3)]
0: {scene: Scene, scenes: Array(1), animations: Array(0), cameras: Array(0), asset: {…}, …}
1: (3) [{…}, {…}, {…}]
length: 2
__proto__: Array(0)