Adding Text on a 3D model

[aiswaryapramod]

@elalish @jasondavies @demarijm @Beilinson Is it's possible to add text over a 3D model using Model Viewer?

[elalish]

Absolutely - we're just an HTML element after all, so you can layer other HTML on top or under us to your heart's content with standard CSS. You can even make elements follow a 3D hotspot on your model. See examples like https://modelviewer.dev/examples/augmentedreality/#transparentBackground and https://modelviewer.dev/examples/annotations/index.html

[aiswaryapramod]

how is it possible? can you show me an example?

[elalish]

It's just standard HTML web design. I'd recommend taking an online course on CSS - there's a lot to it.

[aiswaryapramod]

import React, { useRef, useEffect, useState } from "react";
import "./Text-Custom.css";

function TextCustom() {
const modelViewerRef = useRef(null);
const [canvasTexture, setCanvasTexture] = useState(null);
const [canvasText, setCanvasText] = useState("");

useEffect(() => {
async function initializeCanvasTexture() {
const canvasTex = await getCanvasTexture();
setCanvasTexture(canvasTex);
}

initializeCanvasTexture();

}, []);

useEffect(() => {
updateCanvasTexture(canvasText);
}, [canvasText]);

async function getCanvasTexture() {
const modelViewerAnimated = modelViewerRef.current;
let canvasTex = modelViewerAnimated.createCanvasTexture();
const canvas = canvasTex.source.element;
canvas.width = 1700;
canvas.height = 500;

const ctx = canvas.getContext("2d");
ctx.font = "150px cursive";
ctx.fillStyle = "grey";
ctx.fillText(canvasText, 300, 400);
canvasTex.source.update();
return canvasTex;

}

async function updateCanvasTexture(text) {
const modelViewerAnimated = modelViewerRef.current;
const canvasTex = await getCanvasTexture(text);
modelViewerAnimated.model.materials[0].pbrMetallicRoughness.baseColorTexture.setTexture(
canvasTex
);
}

function handleTextInput(event) {
setCanvasText(event.target.value);
}

return (

Enter Text:

);
}

export default TextCustom;
This is my code . I need the text entered over the model to have a transparent background. However, when I set the background to transparent, it defaults to black. I want the background of the text to match the model's color. For example, if the text is placed over a blue shirt model, the background color of the text should blend seamlessly with the shirt. Therefore, I need the text to have a truly transparent background.

[danilokrulj]

Try this example:

https://github.com/mrdoob/three.js/blob/master/examples/css2d_label.html

This part of code makes the elements background transparent:
moonDiv.style.backgroundColor = 'transparent';

Just change "moonDiv" with the element you want to change.

[aiswaryapramod]

Its not working . still it taked default colour black .Actually iam using model-viewer