Repository

js/Mobilizing/renderer/3D/three/shape/3D/composite/Text.js

import * as THREE from 'three';
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
import { Font } from "three/examples/jsm/loaders/FontLoader";
import Mesh from "../../Mesh";
import Transform from '../../../scene/Transform';

/**
* 3D Text is created from a typeface represented in JSON, please use <a href="http://gero3.github.io/facetype.js/">facetype.js</a> to generate a JSON from a font file. The generated JSON must be loader with a Loader.load.JSON() method and passed to the constructor.
*/
export default class Text extends Mesh {
    /**
    * @param {Object} params Parameters object, given by the constructor.
    * @param {Number} [params.text="text"] the text string
    * @param {Number} [params.fontSize=1] the text font height
    * @param {Number} [params.depth=1] the glyph extrusion depth. 0 to have flat letters.
    * @param {Number} [params.segments=5] the text details and tesselation (curveSegments)
    * @param {Boolean} [params.bevelEnabled=5] the text geometry uses curves
    * @param {Number} params.font the text font to use. Must be a json generated from facetype.js
    */
    constructor({
        text = "text",
        fontSize = 1,
        depth = 1,
        segments = 5,
        bevelEnabled = false,
        bevelSegments = 1,
        bevelThickness = 1,
        bevelSize = 1,
        font = undefined,
    } = {}) {
        super(...arguments);

        this.text = text;
        this.fontSize = fontSize;
        this.depth = depth;
        this.segments = segments;
        this.bevelEnabled = bevelEnabled;
        this.bevelSegments = bevelSegments;
        this.bevelThickness = bevelThickness;
        this.bevelSize = bevelSize;
        this.font = font;

        const textExtrudeSettings = {
            size: this.fontSize,
            height: this.depth,
            curveSegments: this.segments,
            bevelEnabled: this.bevelEnabled,
            bevelThickness: this.bevelThickness,
            bevelSize: this.bevelSize,
            bevelSegments: this.bevelSegments,
            font: new Font(this.font),
        }

        this.geometry = new TextGeometry(this.text, textExtrudeSettings);

        this.geometryVerticesAttributes = this.geometry.attributes.position;
        this.geometryNormalAttributes = this.geometry.attributes.normal;
        this.geometryUVAttributes = this.geometry.attributes.uv;

        //this.geometry.center();

        //manage the material according to the passed params, see the attachMaterial method below
        this.attachMaterial(this.material);
        //console.log(this.material);

        this._mesh = new THREE.Mesh(this.geometry, this.material._material);
        this.transform = new Transform(this);
    }
}