TextGeometry font loading encountered uncaught type error

I've been attempting to utilize a loaded typeface.js font, sourced from Three.js examples. However, I keep encountering the following error:

Uncaught TypeError: this.addShapeList is not a function

Upon inspecting the Three.js file, I'm using the build version from the three.js master branch. The cause of the error appears to be that THREE.ExtrudeGeometry scoped this does not include all previously declared prototype methods.

When trying to adjust the code to use

THREE.ExtrudeGeometry.addShapeList
instead of this.addShapeList, it failed when reaching the
THREE.ExtrudeGeometry.prototype.addShape
method as it couldn't recognize the vertices array within the scope.

Something must be amiss in my creation of the TextGeometry, but I can't seem to pinpoint the issue.

Below is the code snippet used to load the font, create the TextGeometry object, and add it to the scene:

loader.load('./fonts/gentilis_bold.typeface.js', function(response){
        font = response;
        var text = THREE.TextGeometry('Some Text', {
            font: font,
            size: 70
        });

        scene.add(text);
    });

For further reference, here is a link to showcase the problem on JSFiddle.

Answer №1

Don't forget to use the new operator:

const message = new THREE.TextGeometry('Example Text', {

[ Check out this example ]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can I use leaflet to customize the types of roads displayed on the map?

Is there a way to customize the types of roads displayed at different zoom levels using data from the OSM highways list? I have checked the Leaflet documentation but couldn't find the answer. If you happen to come across it, please share the link. e ...

Using NodeJS in conjunction with Nginx

Running both NodeJS and Nginx on the same server has posed a unique challenge for me. I have successfully configured Nginx to handle requests from "www.example.com" while also wanting NodeJS to take requests from "api.example.com". The setup is almost comp ...

utilizing JSON data in a React application

I am working on a React project that involves a parent to grandchild hierarchy. In my code, I am passing values as JSON Objects. There are two input boxes where users can enter values and a button that stores and displays the values when clicked. Below is ...

PassportJS ensuring secure authentication across all routes

Currently, I am implementing passportJS to secure my API Endpoints within an Express application. So far, the following code is functioning properly. app.get("/route1", passport.authenticate('basic', { session: false }), (req, res) => { ...

Analyzing an HTTP response containing a Content-Type header specifying image/jpeg

Currently, I am developing my first web application and the task at hand involves loading an image from a database and sending it to the client for display. On the server side, I have the following code: res.setHeader('Content-Type', pic.mimetyp ...

What is the best way to customize the style of a react.js component upon its creation?

Is there a way to set the style of a react.js component during its creation? Here is a snippet of my code (which I inherited and simplified for clarity) I want to be able to use my LogComponent to display different pages of a Log. However, in certain ins ...

Using AngularJS to implement validation on radio buttons

My application is a cross-platform app that utilizes AngularJS, Monaca, and Onsen UI. Within one of the views, there exists an array of list items where each item can be associated with a random number of radio buttons. These lists are dynamically generat ...

I encountered an issue while working with vite + react that says: "Unable to destructure the property 'user' from 'UrlState(...)' because it is undefined"

I'm currently facing an issue with a React project and I could really use your expertise in helping me solve it. The error message that's showing up is: @react-refresh:278 Uncaught TypeError: Cannot destructure property 'user' of ' ...

Guide to interpreting cell values from a dropdown select option within a datatable

I've been having an issue with a jQuery function that reads and returns data from a jQuery datatable. It all works fine for cell values, but when it comes to drop-downs, it returns the entire option list instead of just the selected value in the last ...

Oops! React encountered an error: Files in the Plugin/Preset are restricted to exporting functions, not objects

I've hit a roadblock while trying to set up a new react project. After overcoming various obstacles, I'm now facing this particular issue: ERROR in ./script.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin ...

Is it possible to create an Express API and incorporate React Router Dom?

Although it may sound obvious, I am facing an issue with using URL parameters on my front end, while also trying to access data from an API in the backend. I seem to be able to get either one working independently, and I suspect that the problem lies withi ...

Instructions on sending search fields by pressing the enter key

Developing my application in React.tsx, I have a menu window that consists of numerous div elements with input fields, checkboxes, and select elements. Upon clicking the submit button, a list of results with user-selected filters appears. As an additional ...

The DataTable fails to refresh following modifications to the HTML table

After making changes to a table row using basic JavaScript, the datatable is not updating properly. Despite seeing the updated values in the table view, retrieving data from the datatable shows the old values. Below is the structure of my table: <tab ...

Loopback: Unable to access the 'find' property as it is undefined

I've come across a few similar questions, but none of the solutions seem to work for me. So, I decided to reach out for help. I'm facing an issue while trying to retrieve data from my database in order to select specific parts of it within my app ...

In the realm of JavaScript, the GET request exclusively functions in Internet Explorer

This particular request is specific to Internet Explorer. I've spent the last two days attempting various solutions to make it work, but unfortunately, I have not been successful. Any advice would be greatly appreciated. Pure JavaScript: var xm ...

Preventing setTimeout from repeating upon reload in Angular

I have a dataset and processing code shown below: LIST = [{ "id": "1lqgDs6cZdWBL", "timeUpdated": "2020-04-22 12:51:23", "status": "CLOSED" }, { "id": "C2Zl9JWfZHSJ& ...

The paste event triggers before any text is input into the textbox

events: { "paste .youtube-url" : "addUrl" } addUrl: function(){ console.log(this.$(".youtube-url").val()); Imagine pasting the text "bad" into the textbox for the first time. Console Output: (an empty string) Then, if you paste and append something l ...

Can the page's user interface stay the same even after refreshing the page?

Are you considering including a test case to verify if all checkboxes are unchecked after the page reloads? Is it possible for checked checkboxes to remain selected even after reloading or navigating away and returning to the page? Could this issue be due ...

What causes a decrease in performance for a React + Three/Threejs application when it is deployed or in production as opposed to running on localhost?

Unfortunately, I do not have a solution for this problem. I am currently facing an issue with my React application using Three.js where the zoom feature performs much better in my local development environment than on the deployed site. The application is ...

Using a JavaScript script in my HTML alongside Vue.js is not possible

Hello there! I recently created a Node.js server and now I'm trying to display an HTML file that contains a Vue script which loads data using another method written in a separate JS file. However, when I attempt to load my HTML file in the browser, ...