You have the ability to create texture and develop material for this specific object using texture:
check out the outcome on codepen.io
- Adjust the text geometry UV (because it is slightly odd and not within [0...1] bounds)
function flatUVbyXY(geometry) {
if ( !(geometry.boundingBox instanceof THREE.Box3) ) {
geometry.computeBoundingBox()
}
const bb = geometry.boundingBox.clone()
const delta = new THREE.Vector3().subVectors(bb.max,bb.min)
for (let i = 0,j = 0; i < geometry.attributes.position.array.length; i+=3, j+=2) {
geometry.attributes.uv.array[j ] = (geometry.attributes.position.array[i ]-bb.min.x)/delta.x
geometry.attributes.uv.array[j+1] = (geometry.attributes.position.array[i+1]-bb.min.y)/delta.y
}
geometry.attributes.uv.needsUpdate = true;
}
//flatUVbyXY(geometry)
//or
//flatUVbyXY(mesh.geometry)
- Make a texture with:
2.1 Establish a scene with only text where border addition is required and an OrthographicCamera that focuses solely on the text object
2.2 Render it and acquire the result as a texture
2.3 Apply this texture onto a plane and render it using shaderMaterial which will incorporate the border with desired width (width specified in 3D space units)
2.4 (optional) Implement an update function that can modify the texture with a new border width without repeating the whole process again (as certain parts do not need repeated work)
function makeFlatBorder(geometry,borderWidth=5,fontColor=0x0000ff,borderColor=0xffff00,pxYSize = 200,canvas=document.createElement('canvas')) {
// Function implementation details continue here...
}
Furthermore, you are able to choose edges type in GLSL shader (uncomment what suits your requirement)
float dist = distance(pos*u_delta.xy,newPos*u_delta.xy); // rounded edges
// float dist = abs(pos.x-newPos.x)*u_delta.x + abs(pos.y-newPos.y)*u_delta.y; // sharp edges
Lastly:
// JavaScript implementation lines follow...
result:
see the final output on codepen.io
https://i.sstatic.net/UmuKssGE.png