Can we add text top of a mesh/object/material?

Hi, I want to know if it’s possible to add a text top of the mesh/material or object to indicate something?
For example: Suppose I have a cat model. in the model’s scene there’s a lot of mesh of the cat model. What I want is to add text to indicate for specific mesh say for leg mesh I want to show text “Leg” on that mesh. For eyes I want to show its an eye with text “eye”. I’m using react three fiber. Thank you.

Don’t forget to read the docs and have a look on google before asking questions, either you’ll be able to find the answer immediately, or you’ll get a better understanding of what you need to ask.

There are many ways to create text in THREE.js, which one to choose will depend on your use-case: should the text be 2D or 3D? Should it always face the camera? Are you generating it dynamically or in a modelling software? Can the user interact with it? Should it occlude / be occluded by 3D scene elements and/or HTML content?

1 Like

related:

and from the
Collection of examples from discourse.threejs.org

LabelsOnSphere

BeginnerExample step 11

TexFont(bitmap-font texturing)

DynamicChangeableText

GradientsMaterialColor

DIVInScene

3DReducedTextGeometry

1 Like

Thank you for the resource. One question here, how can I do this with react three fiber as I just have the access to mesh and scene like this in r3f:

const { scene } = useGLTF(props.url);

I want kind this one but I don’t have access to mesh like that. I have only scene for the model and can traverse the scene but can’t add manually HTML tag with that.

it doesnt matter if you place it inside or outside, just position it to whereever it needs to go

<>
  <mesh ... />
  <Html position={[...]} rotation={[...]} scale={[...]}>
1 Like

Sorry, but I have no idea about react. I do not deal with that.

Seems it needs an extra section questions three+react?

Ok, I got it but how can I add this HTML for specific mesh in the scene? I’m traversing the scene to access the mesh like this:

 scene.traverse((child) => {
    console.log(child)
    }
  });

it makes no sense to traverse, it is an anti practice. you either know the structure of your asset, in which case you can express it declaratively with gltfjsx and put html into a sub node, or you don’t, and in that case traversal doesn’t do anything. just display the model and the html side by side, without nesting html “into” the model, html gets coordinates relative to the position within the model and it will stick there.

:smiling_face_with_tear: i can feel it, it sticks out, would make more sense to ask react related stuff elsewhere and keep discourse purely threejs.

:thinking: Should one make a post in the Site Feedback category. Possibly a new category Questions three+react :question: