Aframe API 支持弯曲图像。然而，除了弯曲的图像之外，我还想制作弯曲的文本和平面。有人可以帮我解决这个问题吗？
我想我必须创建一个实体，但我不知道必须设置哪些属性。
我会使用 https://github.com/mayognaise/aframe-html-shader 创建弯曲文本。弯曲文本是一个部分圆柱体，其材质使用
repeat: -1 1HTML 着色器使用 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>
请参阅我为完整答案所做的示例故障
只需将 a-curvedimage 与 src="#canvas" 一起使用即可。在画布中你可以生成你想要的东西。
<!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>@user1665015 有正确的解决方案！ 我正在使用 React 与 a-frame，ngokevin 的解决方案（html 着色器）在本地工作，但在服务器上构建和上传后，着色器现在显示。
使用画布的解决方案效果很好！