Aframe API支持弯曲图像。但是，除了弯曲的图像外，我还想制作弯曲的文本和平面。有人可以帮我怎么做吗？
我想我必须创建一个实体，但是我不知道必须设置哪些属性。
最佳答案
我将使用https://github.com/mayognaise/aframe-html-shader创建弯曲的文本。弯曲文本是一个局部圆柱体，其 Material 使用repeat: -1 1在内部进行渲染。
HTML着色器使用我们可以用于文本的HTML为我们创建一个纹理，然后将该纹理应用于圆柱体。不幸的是，由于该选项未公开，我们将不得不手动应用repeat: -1 1。大概的主意...
<!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>
看到这个example glitch I made for full answer
https://aframe-curved-text.glitch.me/