Search code examples
javascriptthree.js3d

Three.js how to make text that goes through object?

Subj. How to achieve perspective 3D text goes through another object in the scene? Text background should be transparent.

enter image description here

Bonus question: how do I turn that text into animated ticker?

I've tried CSS3DRenderer, but can't make text background transparent: enter image description here

Solution

  • Approach with TextGeometry would need VertexShader knowledges, and would be a wrong end, in terms of rendering cost and "fine quality" of rendering.

    I believe this example illustrate what you want to achieve but might be a little bit overkill, but the tutorial and code are here (a library used is outdated three-bm-font, i'm working on an ES6 adaptation).

    If you need a simpler approach and explanation:

    • Get an image with text with transparent background (that you generate via photoshop, or, render inside your context to a texture - 3) in doc);
    • You use this image as Texture on a mesh material as map (make sure the material is transparent);
    • "Animated ticker" is reference historically as marquee in web context. To achieve that from there, you can play with the offset of your Texture and make sure wrapS and wrapT are set properly.