Three.js - 3D Text

ThreeJS - Snippets
http://gero3.github.io/facetype.js/ - Konvertieren von Fonts nach Facetype

three.js nutzt Typeface Fonts

Typeface fonts bekommen

• Über Konvertiertools (s.o.)
• Aus den threejs examples: opening the /node_modules/three/examples/fonts/, taking the helvetiker_regular.typeface.json and LICENSE files, and putting these in the /static/fonts/ folder (that you need to create). The font is now accessible just by writing /fonts/helvetiker_regular.typeface.json at the end of the base URL.

Fontloader

Hinweis: Seit three.js 133 muss der Fontloader und die Fontgeometry importiert werden.

https://threejs.org/docs/index.html?q=fontloa#examples/en/loaders/FontLoader

Basic Example

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'//i.e. with webpack
//...
/**
 * Fonts
 */
const fontLoader = new FontLoader()

fontLoader.load(
    //'/fonts/helvetiker_regular.typeface.json',
    '/fonts/BebasNeueBook_Regular.json',
    (font) =>
    {
        console.log('font loaded')
        const textGeometry = new TextGeometry(
            'KHOLJA',
            {
                font: font,
                size: 0.5,
                height: 0.2, // more like extrusion depth
                curveSegments: 8,
                bevelEnabled: true,
                bevelThickness: 0.03,
                bevelSize: 0.01,
                bevelOffset: 0,
                bevelSegments: 4
            }
        )
        textGeometry.center() // easy method to center the text
        const textMaterial = new THREE.MeshBasicMaterial()
        textMaterial.wireframe = true
        const text = new THREE.Mesh(textGeometry,textMaterial)
        scene.add(text)
    }
)

Beispiel: Drehachse korrekt in Text zentrieren (Hard Way)

(BoundingBox + Bevel Korrektur)

/**
 * Fonts
 */
const fontLoader = new FontLoader()

fontLoader.load(
    //'/fonts/helvetiker_regular.typeface.json',
    '/fonts/BebasNeueBook_Regular.json',
    (font) =>
    {
        console.log('font loaded')
        const bevelSize = 0.02
        const bevelThickness = 0.03
        const textGeometry = new TextGeometry(
            'KHOLJA',
            {
                font: font,
                size: 0.5,
                height: 0.2, // more like extrusion depth
                curveSegments: 8,
                bevelEnabled: true,
                bevelThickness: bevelThickness,
                bevelSize: bevelSize,
                bevelOffset: 0,
                bevelSegments: 4
            }
        )
        // use a BoundingBox to orientate at middle
        textGeometry.computeBoundingBox()
        console.log(textGeometry.boundingBox)
        // move geometry (not the mesh) 
        // if we later rotate the mesh we will get a 
        // correct rotation axis
        textGeometry.translate(
            -(textGeometry.boundingBox.max.x-bevelSize) * 0.5,
            -(textGeometry.boundingBox.max.y-bevelSize) * 0.5,
            -(textGeometry.boundingBox.max.z-bevelThickness) * 0.5,
        )

Drehachse zentrieren (easy way)

textGeometry.center()