Hey guys, so this might not be strictly related to Three but I think the clever minds here have more experience with the format than most.
Here’s what I want to do, I’m interested in building a small pre-three authoring tool that helps a user edit a GLTF file. Essentially what I’d like to do is allow a user to name the seperate parts of the file and save it.
I understand you can easily do this in Blender by renaming the layers in the outliner, however I can’t expect the end user to be expected to install a copy just for that.
What the tool would ideally do is upload the GLTF, they have a viewer where they can select each part and name it, potentially even clean up parent relationships and then export the GLTF again.
I know GLTF is binary based, so I’m not sure where to start with this. I was thinking an Electron app if node/JS based environments could handle editing GLTF at all?
I initially imagined a custom Python app that runs Blender in headless mode with a simplistic GUI in its place, but Blender is a big dependency just for GLTF authoring.
I’d love to know if anyone could point me in the right direction on this or share their initial ideas.
Only glb and bin files are binary. Files with the gltf extension are in human-readable text like ordinary JSON files.
If you want to develop a tool in context of glTF, it’s probably best to get familiar with the format by studying the official specification:
In the next step, you might want to study how THREE.GLTFLoader and THREE.GLTFExporter are implemented to understand how to write and importer/exporter.
The two formats are practically identical – if you have a working GLTF loader, it should only take 15-20 more lines of code to support GLB, too. That size difference has to do with how the binary data is embedded: embedding in plaintext JSON is inefficient and adds 20-30% to the filesize. You can avoid that by using GLB, or by using a GLTF+BIN pair, where the binary part of the data is in the .bin.
For the goal you’re describing, though, you wouldn’t necessarily need to understand glTF in detail — you could use THREE.GLTFLoader to load a scene into three.js, do all the naming and re-parenting using the normal three.js APIs, and then export with THREE.GLTFExporter.
There are also a few other editors (easier to use than Blender) that can do this sort of renaming on glTF files:
im using this approach for https://github.com/react-spring/gltfjsx but i had to hack the living #### out of gltfloader because it didnt run under node at all. this could be another barrier for a cli tool.
Hi,
I can feel your pain, I went through this for my 3d smart home web app where I import a gltf from Blender. I would like users to be able to customize the Philips hue light names, MQTT topics and why not the whole house architecture.
I don’t see any reason why your tool cannot be totally Front end web based, although I cannot help with the pop-up that should allow to enter the selected items name, I can help with all the rest that is done here. The concept is that Some smart 3d items have Custom properties and end up generating events on enter and on exit, that should allow you to handle the creation of the edit popup.
For the config storage, why don’t you simply use the browser’s local storage ? With an option that allows the user to export and import his config. For that, I’m used to handle json files drag and drop event, I have examples for that.
So in short, depending on your use case you might not need a separate tool and rather handle the edits on your same final app, and if needed to be separate, then I still think it could be a web based tool.
Here’s the example where I turn some Blender objects into mouse enter and exit events :
BUT, one problem at a time!