GLB/GLTF object text child change on load

Hello,

I am doing a project for my uni, and I was wondering if you could help me out a bit. I am using three.js and GLTF loader and exporter.

I am basically importing a glb file using THREE.GLTFLoader(), and using traverse to get to a Mesh sub-object instance, to modify its colour. Then I export the file. This works fine and mesh colour is the new colour set.

If the model had a text (not mesh) as part of the model (lets say I edited the original 3d file and added text to it), would I be able to do the same with searching for a text sub object and modifying it when loading it?

General idea is to have the text as a way for external value to modify it, to be reflected in the model, then being able to be exported.

Thanks.

Exporting to glTF will represent only the geometry/material/textures of your mesh. threejs objects like Text, Sphere, and TorusKnot have no meaning in glTF and just get turned into normal meshes.

One option would be to use the threejs JSON format here (toJSON() and ObjectLoader). Another would be to store some data in object.userData saying what the original text was, and then after you load it you can look for that text when modifying the object. For example:

object.userData.text = 'This is my text.';

That user data will be preserved when importing/exporting glTF.

3 Likes

Thank you.

Is there any way to have a Mesh in the object that looks like text and have that mesh modified with updated text dynamically?

This is probably complex.

The only other way I have seen text added was as a Texture mapped to the mesh, but that looks rather ugly (not sure how one would centre text).

Its frustrating because I would need a year to understand 3D modelling first :slight_smile:

You’ll need to do that in JS after loading the object. Find the Mesh, replace its geometry with a TextBufferGeometry, and do that again if the text changes. It’s not complex, but this all happens in threejs code because anything coming out of a 3D modeling program or exporter is just a plain mesh.

See https://threejs.org/docs/#api/en/geometries/TextBufferGeometry.

2 Likes

Thank you for taking the time to help.