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.
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>