Issue in Three JS: I encountered the error message "Unsupported OpenType signature <!DO" and need to

Question

Issue in Three JS: I encountered the error message "Unsupported OpenType signature <!DO" and need to

I'm currently working on a three js project and using parcel as my module bundler. I've encountered an issue while trying to load a font with THREE js TTFLoader. Despite researching similar problems online, some suggesting it may be related to the relative path of the font file, I'm still unable to pinpoint the exact cause of the error.

Here is an image showing the error: https://i.sstatic.net/v8OC7.jpg

Project directory structure:

https://i.sstatic.net/fFKA9.jpg

Snippet of code where the error occurs:

app.js

// Loading font using TTFLoader
const ttfLoader = new TTFLoader();

ttfLoader.load('fonts/Mont-Regular.ttf', (json) => {
   const font = new FontLoader(json);

   this.textGeo = new TextGeometry('Hello Text', {
      font: font,
      size: 200,
      height: 50,
      curveSegments: 12,
   });

   this.textMaterial = new THREE.MeshPhongMaterial({
      color: 0xff0000,
      side: THREE.DoubleSide,
   });

   // Creating text mesh
   this.textMesh = new THREE.Mesh(this.textGeo, this.textMaterial);
   this.textMesh.position.set(0, 0, 0);
});

this.scene.add(this.textMesh);

Codesandbox link for reference: https://codesandbox.io/s/three-project-0hpqjr

If anyone can help me resolve this issue, I would greatly appreciate it. Thank you!

javascript fonts three.js truetype

Answer 1

Answer №1

After some trial and error, I finally discovered my mistake. This time around, I opted to use THREE FontLoader instead of TTFLoader and made sure to provide the absolute path from the root project directory. Placing the code snippet this.scene.add(this.textMesh) within the callback function was crucial. I utilized a font example provided by the library:

'node_modules/three/examples/fonts/helvetiker_regular.typeface.json'

, which required an absolute path.

Here's the revised code snippet:

const fontLoader = new FontLoader();
fontLoader.load(
  'node_modules/three/examples/fonts/helvetiker_regular.typeface.json',
   (Helvfont) => {

    this.textGeo = new TextGeometry('Yeah', {
      font: Helvfont,
      size: 0.2,
      height: 0,
    });

    this.textMaterial = new THREE.MeshNormalMaterial();
    this.textMesh = new THREE.Mesh(this.textGeo, this.textMaterial);
    this.textMesh.position.set(-0.5, 0.5, 0);
    this.scene.add(this.textMesh);
  },
);

If you wish to load a .ttf font instead, simply utilize TTFLoader to load the font file and then use FontLoader.parse() to parse the JSON data. This conversion process is necessary for using the .ttf font format.

Here's the updated code snippet for loading a .ttf font:

 const ttfLoader = new TTFLoader();
 const fontLoader = new FontLoader();

 ttfLoader.load('src/fonts/Mont-Regular.ttf', (json) => {
    const MontFont = fontLoader.parse(json);

    this.textGeo = new TextGeometry('Yeah', {
      font: MontFont,
      size: 0.2,
      height: 0,
    });

    this.textMaterial = new THREE.MeshNormalMaterial();
    this.textMesh = new THREE.Mesh(this.textGeo, this.textMaterial);
    this.textMesh.position.set(-0.5, 0.5, 0);
    this.scene.add(this.textMesh);
 });

Answer 2

After some trial and error, I finally discovered my mistake. This time around, I opted to use THREE FontLoader instead of TTFLoader and made sure to provide the absolute path from the root project directory. Placing the code snippet this.scene.add(this.textMesh) within the callback function was crucial. I utilized a font example provided by the library:

'node_modules/three/examples/fonts/helvetiker_regular.typeface.json'

, which required an absolute path.

Here's the revised code snippet:

const fontLoader = new FontLoader();
fontLoader.load(
  'node_modules/three/examples/fonts/helvetiker_regular.typeface.json',
   (Helvfont) => {

    this.textGeo = new TextGeometry('Yeah', {
      font: Helvfont,
      size: 0.2,
      height: 0,
    });

    this.textMaterial = new THREE.MeshNormalMaterial();
    this.textMesh = new THREE.Mesh(this.textGeo, this.textMaterial);
    this.textMesh.position.set(-0.5, 0.5, 0);
    this.scene.add(this.textMesh);
  },
);

If you wish to load a .ttf font instead, simply utilize TTFLoader to load the font file and then use FontLoader.parse() to parse the JSON data. This conversion process is necessary for using the .ttf font format.

Here's the updated code snippet for loading a .ttf font:

 const ttfLoader = new TTFLoader();
 const fontLoader = new FontLoader();

 ttfLoader.load('src/fonts/Mont-Regular.ttf', (json) => {
    const MontFont = fontLoader.parse(json);

    this.textGeo = new TextGeometry('Yeah', {
      font: MontFont,
      size: 0.2,
      height: 0,
    });

    this.textMaterial = new THREE.MeshNormalMaterial();
    this.textMesh = new THREE.Mesh(this.textGeo, this.textMaterial);
    this.textMesh.position.set(-0.5, 0.5, 0);
    this.scene.add(this.textMesh);
 });

Issue in Three JS: I encountered the error message "Unsupported OpenType signature <!DO" and need to

Answer №1

Similar questions

Troubleshooting a problem with jQuery child items

Assistance needed for disabled JavaScript

Detecting onclick on a model in three.js: A simple guide

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

Creating a 3D visualization with three.js

The aspect ratio of Threejs sprites is appearing distorted

What is the best way to display a list of search outcomes?

Transform the characters within a string into corresponding numerical values, calculate the total sum, and finally display both the sum and the original string

Discovering the Harshad number

What is the best way to limit the number of items shown in a cart dropdown using JavaScript

I am trying to include the Css Baseline from @mui/material in my project. However, even though it is present in my JSON file, I am encountering an error stating that '@mui/material' needs to be included in the project

Creating a canvas with multiple label introductions can be achieved by following these

Using AngularJS with angular-google-maps to easily add markers through a form and locate your position with one click

EdgesHelper is malfunctioning

How to automatically scroll to the bottom using jquery/css

Trouble with Mongoose: Data Not Being Saved

using an x-api-key in the header of a service within Angular

Custom transaction settings for Mongoose

Issue with utilizing Vuejs variable in Google Maps Matrix API function

The vertical timeline feature in React does not appear to be displaying properly on the web browser