使用PlaneGeometry-Three.js创建具有弯曲边的平面

我正在尝试创建一个具有曲线/圆边的二维正方形。据我所知，使用飞机是一种方式。但我正在努力弄清楚到底该怎么做。看起来应该很简单。似乎在网上也找不到任何直接的答案，所以我非常感谢您的帮助

// Create plane
let geometry = new THREE.PlaneGeometry(1, 1)
// Round the edges somehow?
this.mesh = new THREE.Mesh(geometry, material)
this.mesh.rotation.x = -Math.PI / 2
this.container.add(this.mesh)

---

根据@prisoner849关于使用三个.Shape（）和三个.ShapeBufferGeometry（）的建议，成功地使其工作。发布我的答案，但基本上与这里找到的答案相同

---

最简单的方法是为平面指定具有所需形状的透明纹理。Threejs只制作正方形的几何图形，没有内置的方法来圆角或切割内部使其空心。使用

THREE.Shape（）

和

THREE.ShapeBufferGeometry（）

似乎是一种选择。谢谢你们两位。我将尝试每种方法。

let x = 1; let y = 1; let width = 50; let height = 50; let radius = 20
        
let shape = new THREE.Shape();
shape.moveTo( x, y + radius );
shape.lineTo( x, y + height - radius );
shape.quadraticCurveTo( x, y + height, x + radius, y + height );
shape.lineTo( x + width - radius, y + height );
shape.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
shape.lineTo( x + width, y + radius );
shape.quadraticCurveTo( x + width, y, x + width - radius, y );
shape.lineTo( x + radius, y );
shape.quadraticCurveTo( x, y, x, y + radius );

let geometry = new THREE.ShapeBufferGeometry( shape );

this.mesh = new THREE.Mesh(geometry, material)
this.mesh.rotation.x = -Math.PI / 2
this.container.add(this.mesh)