pmndrs / gltfjsx Goto Github PK
View Code? Open in Web Editor NEW🎮 Turns GLTFs into JSX components
Home Page: https://gltf.pmnd.rs
License: MIT License
🎮 Turns GLTFs into JSX components
Home Page: https://gltf.pmnd.rs
License: MIT License
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.
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
@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.
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} />; }
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.
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:
npx gltfjsx bottle -t
Actual behavior:
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)
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:
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
Reproduce
Works as expect on non-draco models like: https://github.com/mrdoob/three.js/blob/dev/examples/models/gltf/Flamingo.glb
I have modified my gltf file converted to jsx and now want to convert it back to gltf? How can I do it ?
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;
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!
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.
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.!
Maybe we should use babel ast to generate code?
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)
This is caused when running npx @react-three/gltfjsx ...
Running npx [email protected] ...
works without errors
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');
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.
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.
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.
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?
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.
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)}} `
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.
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
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
Using the online version here:
https://gltf.pmnd.rs/
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
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)
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
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.
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.
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?
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')
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'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>
)
}
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?
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?
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>
);
}
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:
PS: Thank you for your work 👍
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.
İssue :
Can't resolve useAnimations in '@react-three/drei/useAnimations'
Fixed:
import { useAnimations } from '@react-three/drei/core/useAnimations'
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.
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)
...
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://gltf-viewer.donmccurdy.com/
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.
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())
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.