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

Question

我正在尝试创建一个带有弯曲/圆形边缘的 2D 正方形。据我了解，使用飞机是要走的路。我正在努力弄清楚如何做到这一点。看起来应该很简单。似乎也无法在网上找到任何直截了当的答案，所以我非常感谢您的帮助。

// 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)

标签： three.jsplane

Answer 1

根据@prisoner849 使用 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)