CODEWITHSUNDEEP
javascriptvirtual-realityaframe
Cees Mandjes
Cees Mandjes

Reputation: 195

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.

Upvotes: 3

Views: 2333

Answers (2)

user1665015
user1665015

Reputation: 1

Just use a-curvedimage with src="#canvas". In canvas you can generate, what you want.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    </head>
    <body>

    <a-scene>
        <a-assets>
            <canvas id="myCanvas"></canvas>
        </a-assets>

        <a-curvedimage
            src="#myCanvas"
            radius="2"
            theta-length="30"
            rotation="0 160 0"
            >        
        </a-curvedimage>
    </a-scene>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#000"
        ctx.font = "22px sans-serif";
        ctx.fillText("Lorem ipsum dolor sit amet", 0, 30);
    </script>
</body>
</html>

Upvotes: 0

ngokevin
ngokevin

Reputation: 13233

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/[email protected]/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/

Upvotes: 2

Related Questions