Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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

Tags:

2

Answers


  1. 0

    You can achieve this result by using Three.js’s text geometry. It is a bit more complicated to use than a BoxGeometry() or SphereGeometry(), but the docs and examples are going to be helpful. See the links below…

    Docs: https://threejs.org/docs/#examples/en/geometries/TextGeometry

    Example: https://threejs.org/examples/#webgl_geometry_text

    Tutorials: https://www.tutorialspoint.com/threejs/threejs_creating_text.htm

    Note: You can always check the source code of all Three.js examples. Search for what you want there on the docs and check the code.

    Login or Signup to reply.
  2. 0

    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.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search