How to make a 2D border with the same thickness around the entire perimeter

I need your help, those who understand this. I have a transparent 2D rectangle that is dynamically resizing (height and width) using .scale.set (). This is the yellow rectangle in the screenshot. I made a 2D border around the perimeter of this rectangle using this code:

let borderGeometry = new THREE.RingGeometry(
    innerRadius, outerRadius, 4);

// create border mesh
yellBord = new THREE.Mesh(borderGeometry, new THREE.MeshBasicMaterial({ 
    		color: 'orange',	
    		side: THREE.DoubleSide,
    		transparent: true,
    		opacity: 0.7

The problem is that when I change the size of the resulting rectangle with a border, the thickness of the border does not change evenly in height and width. That is, the shape is first defined as a square, then the height becomes larger than the width (after applying set.scale), the top and bottom borders become thinner than on the sides of the rectangle. Could someone of you with a lot of experience in 2D shapes could advise me? Thank you a lot

Have a look at this fiddle, it might help you :


Thanks, but I would not like to use shaders here. Maybe there are other solutions?

Why not?
There is no out-of-box functionality of material, for the task you have. Solution provided by @felixmariotto is really good.

1 Like

Ok, then I’ll try to use this solution as a basis. It’s just that in this case I will have to deal with shaders with which I had no experience.

Here is an option with a rectangular border, and an attempt of antialiasing :sweat_smile:


Oh, thank you! I’ll try to get this example as base