Three.js Shapes

Questions
,
1

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 );
scene.add( line );

visually like this.
I mean I just want a shape with a edge and no background.
777

2

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
3

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 );
scene.add( line );
1 Like
4

Looking good! I thought the OP is looking for a wider contour (not just 1px). Alternatively to a hole definition, rendering with wide lines would also be an option.

5

I really need wide lines