Adding a Border to TextGeometry in Three.js

There are several approaches to create a border effect around TextGeometry in Three.js:

1. Using Two Geometries

The most common approach is to create two text geometries with different sizes:

JAVASCRIPTCopied
// Load font
const loader = new THREE.FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json', function(font) {
  // Inner text (blue)
  const innerTextGeometry = new THREE.TextGeometry('Your Text', {
    font: font,
    size: 1.0,
    height: 0.2,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 0.03,
    bevelSize: 0.02,
    bevelOffset: 0,
    bevelSegments: 5
  });
  
  // Outer text (red border)
  const outerTextGeometry = new THREE.TextGeometry('Your Text', {
    font: font,
    size: 1.05, // Slightly larger
    height: 0.25, // Slightly deeper
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 0.05, // Larger bevel
    bevelSize: 0.04,  // Larger bevel size
    bevelOffset: 0,
    bevelSegments: 5
  });
  
  // Create materials
  const innerMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // Blue
  const outerMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Red
  
  // Create meshes
  const innerText = new THREE.Mesh(innerTextGeometry, innerMaterial);
  const outerText = new THREE.Mesh(outerTextGeometry, outerMaterial);
  
  // Add to scene - add outer text first so it appears behind
  scene.add(outerText);
  scene.add(innerText);
});

2. Using Outline Effect

You can use the OutlineEffect from Three.js examples:

JAVASCRIPTCopied
import { OutlineEffect } from 'three/examples/jsm/effects/OutlineEffect.js';

// Create the effect
const outlineEffect = new OutlineEffect(renderer, {
  defaultThickness: 0.01,
  defaultColor: [1, 0, 0], // Red outline
  defaultAlpha: 1
});

// In your animation loop, use the effect instead of the renderer
function animate() {
  requestAnimationFrame(animate);
  outlineEffect.render(scene, camera);
}

3. Using ShaderMaterial

For more control, you can create a custom shader material:

JAVASCRIPTCopied
const textMesh = new THREE.Mesh(
  textGeometry,
  new THREE.ShaderMaterial({
    uniforms: {
      color: { value: new THREE.Color(0x0000ff) },
      borderColor: { value: new THREE.Color(0xff0000) },
      borderWidth: { value: 0.05 }
    },
    vertexShader: /* Your vertex shader code */,
    fragmentShader: /* Your fragment shader code */
  })
);

4. Using CSG (Constructive Solid Geometry)

For complex shapes, you can use CSG operations with libraries like three-csg-ts:

JAVASCRIPTCopied
import { CSG } from 'three-csg-ts';

// Create inner and outer text geometries
// ...

// Create meshes
const innerMesh = new THREE.Mesh(innerTextGeometry, innerMaterial);
const outerMesh = new THREE.Mesh(outerTextGeometry, outerMaterial);

// Perform CSG subtraction
const borderMesh = CSG.subtract(outerMesh, innerMesh);
scene.add(borderMesh);

The first approach (using two geometries) is the most straightforward and should give you the effect shown in your reference image.