CODEWITHSUNDEEP
three.jsplane
Liron Toledo
Liron Toledo

Reputation: 63

Create a plane with curved edges using PlaneGeometry - Three.js

I'm trying to create a 2D square with curved/round edges. As I understand it using planes is the way to go. I'm struggling to figure out how exactly to do this though. It seems like it should be simple. Can't seem to find any straightforward answers online either so I would really appreciate the help.

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

This is what im going for except filled in

Upvotes: 1

Views: 6037

Answers (1)

Liron Toledo
Liron Toledo

Reputation: 63

Managed to get it working based off @prisoner849 suggestion to use THREE.Shape() and THREE.ShapeBufferGeometry(). Posting my answer but its mostly the same as the found here here

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)

Upvotes: 2

Related Questions