Aframe通过矢量创建形状

Question

我正在执行类似How to create a custom square in a-frame的操作，但具有自定义形状（即在图像周围绘制热点以使该图像的一部分成为交互式对象）

我的生产线已经开始工作，现在我正尝试将其转换为填充。

    this._mesh = make('a-plane', {
        geometry:"buffer: false"
    }, this.el)
    this._mesh.addEventListener('loaded', e => {
        this._mesh.getObject3D('mesh').geometry.vertices = this._points
        this._mesh.getObject3D('mesh').geometry.computeFaceNormals()
        this._mesh.getObject3D('mesh').geometry.computeVertexNormals()
    }) 

我越来越近了，但它只显示一个三角形，即像这样的

如何获得形状来填充整个区域？我之前使用ConvexGeometry和Quick船体做到了这一点，但似乎很麻烦。

我从上面的文章中得到了更新平面顶点的想法。

Answer 1

[如果创建的数组包含Vector2个对象，它们按CCW顺序表示形状的轮廓，则可以使用Shape和ShapeBufferGeometry的实例来获得预期的结果。只需将点数组传递给Shape的ctor。以下官方three.js示例演示了此方法：

https://threejs.org/examples/webgl_geometry_shapes

BTW：除了通过点数组定义轮廓之外，还可以使用Shape的API定义形状。一个简单的三角形如下所示：

var triangleShape = new THREE.Shape()
    .moveTo( 80, 20 )
    .lineTo( 40, 80 )
    .lineTo( 120, 80 )
    .lineTo( 80, 20 );

var geometry = new THREE.ShapeBufferGeometry( shape );
var mesh = new THREE.Mesh( geometry, material );

three.js R113