在A帧场景中渲染2D形状的最简单方法是什么？

Question

说，是人类轮廓的形状。

理想情况下，可以通过拉伸将其转换为3d，但是即使没有深度，这也适合我的用例。

Answer 1

我认为最简单的方法是拍摄透明的png图像（人的轮廓），并将其用作a-plane的来源

<a-plane material="src: img.png; transparent: true"></a-plane>

小故障here。

....但是，如果要创建具有自定义形状的几何形状（这将有助于拉伸），请检查以下内容：

使用基础THREE.js创建简单形状

首先，您需要一个2D点数组：

let points = [];
points.push(new THREE.Vector2(0, 0));
// and so on for as many as you want

创建一个THREE.Shape对象，该对象将从数组中创建顶点

var shape = new THREE.Shape(points);

使用形状几何体和任何材质创建网格，然后将其添加到场景或实体中

var geometry = new THREE.ShapeGeometry(shape);
var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});

var mesh = new THREE.Mesh(geometry, material);
entity.object3D.add(mesh);

更多信息：
1）THREE.Shape
2）THREE.ShapeGeometry
3）THREE.Mesh

---

挤出

您可以使用ShapeGeometry对象代替ExtrudeGeometry：

var extrudedGeometry = new THREE.ExtrudeGeometry(shape, {amount: 5, bevelEnabled: false});

该数量基本上是“厚度”。有关Three.ExtrudeGeometry here的更多信息。

---

与AFRAME一起使用

我建议创建一个AFRAME自定义组件：

js

AFRAME.registerComponent('foo', {
    init: function() {
       // mesh creation
       this.el.object3D.add(mesh);
    }
}) 

HTML

<a-entity foo></a-entity>

2D形状here。
拉伸的2D形状here。
Three.js示例here。它们比我的多边形要复杂得多：）