Aligning HTML Elements to 3D

Sometimes you’d like to display some text in your 3D scene. You have many options each with pluses and minuses.

• Use 3D text

  If you look at the primitives you’ll see TextGeometry which makes 3D text. This might be useful for flying logos but probably not so useful for stats, info, or labelling lots of things.

• Use a texture with 2D text drawn into it.

  The article on using a Canvas as a texture shows using a canvas as a texture. You can draw text into a canvas and display it as a billboard. The plus here might be that the text is integrated into the 3D scene. For something like a computer terminal shown in a 3D scene this might be perfect.

• Use HTML Elements and position them to match the 3D

  The benefits to this approach is you can use all of HTML. Your HTML can have multiple elements. It can by styled with CSS. It can also be selected by the user as it is actual text.

Sometimes using three.js requires coming up with creative solutions. I’m not sure this is a great solution but I thought I’d share it and you can see if it suggests any solutions for your needs.

You can see a globe here that displays country name as HTML element.

Meet Tony – https://linktr.ee/maapps