# Three.js Shapes

Hello.
How i can do from this shape

``````let x = 1; let y = 1; let width = 90; let height = 60; let radius = 10;
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 ScreenGeometry = new THREE.ShapeBufferGeometry( shape );
const material = new THREE.LineBasicMaterial({
color: 0x0000ff,
wireframe: false
});

const line = new THREE.Line( ScreenGeometry, material );
``````

visually like this.
I mean I just want a shape with a edge and no background. What you are doing in your code is not 100% correct. `ShapeBufferGeometry` is intended for meshes, not for lines or points. So you should always create a mesh from it.

To achieve you intended result, it’s best if you define a second smaller path in reversed order and treat it as a hole definition. Code it similar like the smiley shape in the following example: three.js webgl - geometry - shapes

1 Like

Shorter option:

``````let shape = new THREE.Shape();
shape.autoClose = true;
let angleStep = Math.PI * 0.5;
let w = 90, h = 60, r = 10;
shape.absarc(w - r, h - r, r, angleStep * 0, angleStep * 1);
shape.absarc(r, h - r, r, angleStep * 1, angleStep * 2);
shape.absarc(r, r, r, angleStep * 2, angleStep * 3);
shape.absarc(w - r, r, r, angleStep * 3, angleStep * 4);

let ScreenGeometry = new THREE.BufferGeometry().setFromPoints(shape.getPoints());
const material = new THREE.LineBasicMaterial({
color: 0x0000ff
});

const line = new THREE.Line( ScreenGeometry, material );