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

比如说，一个人的轮廓形状

---

理想情况下，可以通过拉伸将其转换为3d，但即使它没有深度，这对我的用例来说也很好。

我认为最简单的方法是拍摄一张透明的

png

图像（人体轮廓），并将其用作

a平面的源

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

创建一个
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） 

2） 

(三)


挤压
可以使用
extractegeometry
对象代替
ShapeGeometry
：

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

其中数量基本上是“厚度”。更多关于
Three.ExtrudeGeometry
的信息


带框架的用法
我建议创建一个
AFRAME
自定义组件：

js

HTML



挤压二维形状。

三个.js示例。它们比我的多边形更复杂：）

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

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

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