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

Questions
, ,
1

Hello!
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
rect

2

Have a look at this fiddle, it might help you : https://jsfiddle.net/felixmariotto/ozds3yxa/16/

2 Likes
3

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

4

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
5

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.

6

Here is an option with a rectangular border, and an attempt of antialiasing :sweat_smile:
Example: https://jsfiddle.net/prisoner849/bfLt4a0p/
Picture:

изображение
изображение715×730 10.2 KB

2 Likes
7

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