Helvetiker Bold + 3D Outline

3D Blue outline with red shadow behind, mouse-controlled rotation

3D Outline Text Preview

Drag to rotate in all axes

3D Outline + Red Shadow Behind with Mouse Rotation

Text Settings

Presets

Effect Details

LineBasicMaterial Outline

  • • Blue line outline using Three.js Lines
  • • ShapeGeometry from font.generateShapes()
  • • Handles holes and complex shapes
  • • Standard Three.js text approach

Fill Layer Behind

  • • Red filled mesh positioned behind (z: -150)
  • • MeshBasicMaterial with transparency
  • • Same ShapeGeometry as outline
  • • Mouse drag rotation in perspective

ShapeGeometry + LineBasicMaterial

// 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
})

Layered Rendering

// 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)

Helvetiker + CSS Stroke Benefits

Helvetiker Bold

Professional typography with clean geometry, perfect for 3D text rendering

CSS Stroke

WebKit text stroke for clean outlines with rich visual effects

3D Shadow Layers

Diagonal positioned shadows with perfect depth and rotation sync