134.3.241.3: Die Seite wurde neu angelegt: „ ThreeJS - Snippets http://gero3.github.io/facetype.js/ - Konvertieren von Fonts nach Facetype three.js nutzt Typeface Fonts === Typeface fonts bekommen =…“

2021-12-30T20:19:17Z

Die Seite wurde neu angelegt: „ ThreeJS - Snippets http://gero3.github.io/facetype.js/ - Konvertieren von Fonts nach Facetype three.js nutzt Typeface Fonts === Typeface fonts bekommen =…“

Neue Seite

[[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====
<syntaxhighlight lang="javascript">
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)
}
)
</syntaxhighlight>

==== Beispiel: Drehachse korrekt in Text zentrieren (Hard Way)====
(BoundingBox + Bevel Korrektur)
<syntaxhighlight lang="javascript">
/**
* 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,
)
</syntaxhighlight>
=== Drehachse zentrieren (easy way) ===
textGeometry.center()

Three.js - 3D Text - Versionsgeschichte

134.3.241.3: Die Seite wurde neu angelegt: „ ThreeJS - Snippets http://gero3.github.io/facetype.js/ - Konvertieren von Fonts nach Facetype three.js nutzt Typeface Fonts === Typeface fonts bekommen =…“