CSS Stroke + 3D Shadows

// Generate shapes from font (Three.js standard approach)
const shapes = font.generateShapes(text, size * 20)

// Create shape geometry
const geometry = new THREE.ShapeGeometry(shapes)
geometry.computeBoundingBox()

const xMid = -0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x)
geometry.translate(xMid, 0, 0)

// Materials
const matDark = new THREE.LineBasicMaterial({
  color: 0x4A90E2, // Blue outline
  side: THREE.DoubleSide
})

const matLite = new THREE.MeshBasicMaterial({
  color: 0xFF6B6B, // Red fill/shadow
  transparent: true,
  opacity: 0.6,
  side: THREE.DoubleSide
})

// Create filled mesh (background) - positioned behind
const fillMesh = new THREE.Mesh(geometry, matLite)
fillMesh.position.z = -150
scene.add(fillMesh)

// Create line outline - positioned in front
const lineText = new THREE.Object3D()

for (let i = 0; i < shapes.length; i++) {
  const shape = shapes[i]
  const points = shape.getPoints()
  const lineGeometry = new THREE.BufferGeometry().setFromPoints(points)
  lineGeometry.translate(xMid, 0, 0)

  const lineMesh = new THREE.Line(lineGeometry, matDark)
  lineText.add(lineMesh)
}

scene.add(lineText)