Cntrl F on text within mesh which is inside Canvas

Questions
1

Hello everyone, I have a situation where I need to enable Control+F and find the text which is inside a mesh and is shown in canvas. Any suggestions please?

2

Do not find yourself in a situation where you need to Ctrl+F to search within text which rendered in canvas, because canvas is just pixels, it ain’t searchable :relieved:

You can try using troika-three-text (it implements cursor functionality already) and write the search logic yourself. Alternatively, just don’t render text in canvas and use CSS3DRenderer instead.

3

i have some examples that allow for text select/ctrl-f et al. like mj said you would normally render css3d, or both css3d and sdf text. the upside with doing both is that gl text reacts to lights, fog, environments, postpro etc, this is what design agencies normally do because they are required to observe a11y. if you don’t need that don’t bother with webgl text.

4

You can create hidden element or popup with the same text that renders in the canvas. And show it when ctrl+f pressed.

onkeydown=(e=>{
    if (e.code == 'KeyF' && e.ctrlKey) showHiddenText()
})
1 Like