https://github.com/nascherman/opentype-geometry

Convert opentype to threejs geometry
https://github.com/nascherman/opentype-geometry

Last synced: 3 months ago
JSON representation

Convert opentype to threejs geometry

• Host: GitHub
• URL: https://github.com/nascherman/opentype-geometry
• Owner: nascherman
• License: mit
• Created: 2016-06-30T18:41:10.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-09-29T16:40:27.000Z (about 8 years ago)
• Last Synced: 2024-07-06T06:01:42.905Z (4 months ago)
• Language: JavaScript
• Size: 5.11 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-typography - opentype-geometry - Convert Text from OpenType font to three.js 3D. (JavaScript)

README

        
# opentype-geometry

Convert opentype to geometry. Based on the [opentype-layout](https://www.npmjs.com/package/opentype-layout) module.

You can convert ttf files to threejs geometry to be made into a mesh like so.

```javascript

  let typeLayout = new OpenTypeGeometry();

  typeLayout.loadOpenType({

    fontFace: './demo/fonts/Pacifico.ttf',

    fontSizePx: 16,

    lineHeight: 2,

    width: 100,

    letterSpacing: 1.1,

    callback: function() {

      typeLayout.setText('Some text');

      typeLayout.currentText.forEach((glyph) => {

      let mesh = new THREE.Mesh(

        glyph.geometry.geometry, 

        new THREE.MeshPhongMaterial( { color: textColor, wireframe: false }) 

      );

      mesh.position.x = glyph.position[0];

      mesh.position.y = glyph.position[1];

      scene.add(mesh);

    });

  })

```

## Install 

```sh

npm install opentype-geometry --save

```

## Demo 

[Live Demo](https://opentype-geometry.herokuapp.com/)