Hi there, i’m looking for a good and simple way to transform fbx files into jsons.
I’m interested in Bones and Dummies only.
The best thing would be to have a flat data format of the json, but the main thing is that the transformation and rotation/scaling data are correctly carried throught the process.
How can i do?
Is there a reason you don’t want to use the more efficient GLTF format?
The reason is that im working on a project that requires fbx (at least for the meshes and materials), but accepts only jsons for dummies and bones (plus materials).
So i can potentially use the GLTF format for the bones/dummies only, but it would be better if i could have to handle just one format.
Generally speaking, the importing into the game is done by FBX.
But, since the bones are crucial, any way that allows me to correctly and easily transfer them from blender to the json and then the game file, will be welcomed.
Just be aware that i’m not super expert in all the formats available.
But anyway, this is what i need:
A way to correctly carry out the bones (and dummies) from blender to a json file (which i also need to query out in order to make it work).
So, in the end, it doesn’t really matter i guess.
The best exporter from blender->threejs is the gltf exporter.
Once it’s in threejs you can extract the bones and dummies and do what you want with them?
so can you explain me in a more detailed way?
to start with, is it better Gltf binary or separate?
on second hand, you are basicalyl suggesting to export form blender to the threejs editor and then export what i need right?
Yeah that is basically what I am suggesting, but I’m also suggesting, that if at all possible, if you are working with something that is meant to be consumed on the web, you should avoid FBX/JSON solutions entirely and convert everything to GLTF… and only use FBX or other represenatations as the “source” art format… which you then export to GLTF for the actual shipping app.
r.e. binary vs text:
I prefer the binary variant because everything is contained in one file… and it produces relatively compact files, which is important for browser based consumption…
Additionally… there are compression tools for GLTF that can do amazing optimizations to your assets to make them run well and small to download.
The text format can also be useful in some situations because its human readable, and processable.
The blender JSON exporter for threejs is Very old and probably not well maintained. (don’t quote me on this, i haven’t looked at it in a while )
The .toJSON methods on threejs objects themselves inside threejs work well enough and probably would contain all the information you need or are trying to extract.
No, i’m not working with something that is meant to be used by the public, except for the final main release.
For the work i’m doing i have to work with fbx files, at least for the meshes.
So i only need a way to correctly export the skeleton from Blender/fbx/gltf or whatever format, to a json file.
this is because the program i work with only accepts jsons for the bones.
So, what the best way, once it’s loaded in threejs editor, to export bones?
scene.traverse(e=>{
if(e.isBone)console.log(e.name);
if(e.isSkinnedMesh)console.log(e.skeleton)
})
maybe?
i have no idea of what to do with that
Just showing how you can access the bones / skeleton at runtime… then you could export them to json however you need.
i did select the main bone and exported it with all the children. My question is, how do i reconneize rotation ans scaling?
how do i reconneize rotation ans scaling
I don’t understand this. I’m sorry.
Bones have different values, translation (position), rotation and scaling.
In Blender you can also see the difference between head and tail of the bone.
How can i reconnaize this values in the extracted json?
scene.traverse(e=>{
if(e.isBone)console.log(e.name ,e.position ,e.rotation );
})
?
i mean in the json, not the editor.
and btw, i still don’t know what to do with these commands
I think we need to back up a bit.
Please explain what you are trying to generate and for what specific use case.
What are these bones going to be used for, and do you mean animations? or JUST the bones?
Because… it sounds like you’re not talking about threejs really… more of a general conversion process for extracting bones from FBX? You might want to look into scripting this in blenders python api or something. ChatGPT can walk you through making a blender python script for exporting bones as json.
i will try that out but i see many people are still stuck with that.
i come here because i saw that blender addon moved from “json exporter” to “threejs”.
i need a json with the bones only, then i will have to query convert it (i have multiples) in the data format i need.
This is why i need to know the position of transformations, scaling and rotation, inside the extracted JSON file.
From chatGPT (4):
prompt:
write me a single file drag and drop exporter using js and threejs, that can load an FBX file, and exports the skeleton + bone information, including bone position, rotation, and scale, and the hierarchy?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FBX Skeleton Exporter</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
#drop-container { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; background: rgba(0,0,0,0.5); }
.hidden { display: none; }
</style>
</head>
<body>
<div id="drop-container">Drop an FBX File Here</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/FBXLoader.js"></script>
<script>
const container = document.getElementById('drop-container');
container.addEventListener('dragover', function(event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
container.style.background = 'rgba(0,255,0,0.5)';
}, false);
container.addEventListener('dragleave', function(event) {
container.style.background = 'rgba(0,0,0,0.5)';
}, false);
container.addEventListener('drop', function(event) {
event.preventDefault();
container.style.background = 'rgba(0,0,0,0.5)';
const file = event.dataTransfer.files[0];
loadFBX(file);
}, false);
function loadFBX(file) {
const reader = new FileReader();
reader.onload = function(event) {
const loader = new THREE.FBXLoader();
const object = loader.parse(event.target.result, '');
if (object.isGroup) {
const skeleton = new THREE.SkeletonHelper(object);
const bones = skeleton.bones;
let exportData = {
bones: bones.map(bone => ({
name: bone.name,
position: bone.position.toArray(),
rotation: bone.rotation.toArray(), // Quaternion or Euler based on your preference
scale: bone.scale.toArray(),
parent: bone.parent ? bone.parent.name : null
}))
};
exportSkeleton(exportData);
}
};
reader.readAsArrayBuffer(file);
}
function exportSkeleton(data) {
const blob = new Blob([JSON.stringify(data)], {type: 'application/json'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'skeleton.json';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
</script>
</body>
</html>
looks like it solved it, ty!