javascriptvirtual-realityaframe

Aframe VR Curved plane and text


The Aframe API is supporting curved images. However, besides curved images I would like to make curved text and planes. Can someone help me out how to do this?

I think I have to make a entity, but I dont know which properties must be set.


Solution

  • I'd use the https://github.com/mayognaise/aframe-html-shader to create curved text. Curved text is a partial cylinder with the material rendered on the inside using repeat: -1 1.

    The HTML shader creates a texture for us using HTML which we can use for text, and then apply that texture to the cylinder. Unfortunately, we will have to apply the repeat: -1 1 manually as that option is not exposed. The rough idea...

    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello, WebVR! - A-Frame</title>
        <meta name="description" content="Hello, WebVR! - A-Frame">
        <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
        <script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js">
      </head>
      <body>
        <script>
          AFRAME.registerComponent('update-repeat', {
            dependencies: ['material'], 
    
            init: function () {
              var texture = this.el.components.material.material.map;
              texture.repeat = new THREE.Vector2(-1, 1);
              texture.needsUpdate = true;
            }
          });
        </script>
    
        <div id="texture" style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden">
          <p style="position: relative; top: 20px; font-size: 72px">HELLO HELLO</p>
          <p style="position: relative; top: 20px; font-size: 48px">curvy text</p>
        </div>
    
        <a-scene>
          <a-entity geometry="primitive: cylinder; radius: 2; segmentsRadial: 48; thetaLength: -160; openEnded: true"       
                    material="shader: html; target: #texture; side: double; width: 500; height: 300; transparent: true" update-repeat position="0 0 -4" rotation="0 -90 0"></a-entity>
          <a-sky color="#FAFAFA"></a-sky>
        </a-scene>
      </body>
    </html>
    

    See this example glitch I made for full answer

    https://aframe-curved-text.glitch.me/