Aframe VR Curved plane and text
Question
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.
2 answers
solution1
2 ACCPTED 2017-07-18 22:00:03
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>
solution2
0 2020-01-29 08:38:40
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.