What are the steps for implementing TextGeometry in three.js?

I'm having trouble adding text in three.js. Whenever I try to use this code, it gives me an error saying

Uncaught TypeError: Cannot read property 'offsetX' of undefined
. Any suggestions on how to resolve this issue?

Feel free to check out my .json file.

var loader = new THREE.FontLoader();
loader.load( 'https://thefortcity.dev/build/fonts/FontAwesome_Regular.json', function (font) {
    var textGeometry = new THREE.TextGeometry( "text", {
        font: font,
        size: 50,
        height: 10,
        curveSegments: 12,
        bevelThickness: 1,
        bevelSize: 1,
        bevelEnabled: true
    });

    var textMaterial = new THREE.MeshPhongMaterial( 
        { color: 0xff0000, specular: 0xffffff }
    );

    var mesh = new THREE.Mesh(textGeometry, textMaterial);

    scene.add(mesh);
});  

Answer №1

The issue lies in the usage of Font Awesome. Upon examining your font definition file, it becomes apparent that none of the letters in "text" are defined for display. To remedy this, consider using alternative symbols such as:

/** 
   below boxes represent: 
   - fa-volume-up []
   - fa-font []
   - fa-italic []
   - fa-align-right []
*/
var textGeometry = new THREE.TextGeometry( "   ", {

This adjustment should resolve the issue at hand. For reference, you can find these symbols on the cheatsheet and directly insert them into your code to verify functionality.


For demonstration purposes, feel free to experiment with this plunkr.

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

Tips on automating the process of moving overflowing elements into a dropdown menu

Challenge Description In need of a dynamic navigation bar, I faced the problem of displaying only the first X items on one line and have the remaining items hidden in a "Show more" dropdown. The challenge was to calculate the width of each item accurately ...

Removing an unnamed cookie

A mysterious cookie mysteriously appeared on my website, courtesy of Sharethis (value "sharethis_cookie_test"). This cookie is causing all sorts of session issues for me specifically on Chrome. Despite removing the sharethis plugin from my site, this pesky ...

Retrieving PokéAPI image information

My goal is to display images from the PokéAPI on my app's homescreen when it is opened. However, I am facing a challenge where I need to call 30 different APIs in order to show 30 images. Calling these APIs one after another every few seconds seems l ...

Utilizing React's useState with array.map for handling multiple elements

I want to create multiple useStates for dynamically generated elements within an array.map. Each element in the array.map should share the same useState but have a unique assigned value. For instance, if the array.map contains three different elements, e ...

Transforming a string into an array of objects into an array of numerical values

Can anyone assist me in extracting an array of numbers from an array of objects with string values as properties? Below is an example of the array: scores = [ { maxScore:"100" obtainedScore:"79" ...

What is the best way to arrange a collection of string numbers?

Below is the list of prices: var price = new Array("600", "250", "750", "400", "200", "500", "350", "800", "200", "700", "800", "700", "1", "800", "500", "25", "0", "1,000,000"); I am looking to organize and display them in ascending order. In response ...

Place a cookie on the alternate language domain

Within my website, we utilize 2 distinct domains, each dedicated to a different language. www.mysite.com en.mysite.com I am interested in implementing JavaScript to establish a cookie on en.mysite.com when clicking a link on www.mysite.com. Here is my ...

Issue with Angular UI-Router: Unexpected failure to load template not requested by user

Click here to view the Plunker code related to the issue described below Full link: http://plnkr.co/edit/Bz3Qhf1eDuFrnKI0qnUo?p=preview Exploring the functionalities of two components from the AngularUI suite - UI-Router and UI-Bootstrap. UI-Router manag ...

Can I keep using ng-repeat multiple times in my code?

Working on a AngularJS application that involves handling a complex JSON file with multiple nested arrays and objects. My query is: Is it appropriate to use ng-repeat repeatedly for accessing the data from the JSON? <div ng-repeat="parent in parents"&g ...

The Wikipedia API is unable to be loaded using the XMLHttpRequest

I have encountered this error before on this platform, and although I managed to fix it, I am seeking a more in-depth explanation of the solution. For a project where I am learning, I decided to create a Wikipedia Viewer application. The first step was to ...

What is the best way to relocate a function from Gruntfile.js?

Within my Gruntfile.js, I currently have a function called my_function: // Gruntfile.js module.exports = function(grunt) { var config = my_function(grunt); grunt.initConfig(config); }; function my_function(grunt) { //some code return c ...

Managing data flow in React and Reflux: Utilizing a single component duplicated in the DOM

Imagine this Tree scenario: <Homepage> <HeaderSection> <Navbar> <ShoppingCartComponent> </Navbar> </HeaderSection> <MainContent> <ShoppingCartComponent> &l ...

Creating a peaceful web platform with React that supports several user roles

I am in the process of developing a single-page web application that must be completely restful, which is new territory for me. One challenge I'm facing is determining how to efficiently render the user interface for different roles using React. With ...

Does the [data-empty] constitute a component of the browser environment?

While exploring a node.js project that employs socket.io, I came across a piece of code that verifies whether the length of $('[data-empty]') is larger than 0. There was no class or ID associated with it, but it seemed like data-empty was some ki ...

It seems like there is an issue with the res.render function as it is

My goal is to capture an input from my main website. Once the input is submitted, the page should automatically redirect to /view. Despite successfully triggering the redirection with console.log(), the res.render function does not seem to be working as ex ...

How to Disable CSS3 Animation Using jQuery?

Upon loading the page, I have an object with a specific animation: .logo-mark { -webkit-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); -moz-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); -ms- ...

Is it wrong to use <match v-for='match in matches' v-bind:match='match'></match>? Am I allowed to incorporate the match variable from the v-for loop into the v-bind attribute on the

I am attempting to display HTML for each individual match within the matches array. However, I am uncertain if <match v-for='match in matches' v-bind:match='match'></match> is the correct syntax to achieve this. To clarify, ...

Difficulty in defining the impact of a function on a single menu

Q:: How can I restrict a jquery function to apply only on a specific set of list items in my website? $("li").mouseover(function(){ $(this).stop().animate({height:'230px'},{queue:false, duration:10, easing: 'easeOutBounce'}) ...

"Two columns of identical width, each occupying 50% of the screen height

I am currently working on a design featuring two columns, each set to occupy 50% of the width. I am facing a challenge with ensuring that the height of these columns stretches to the full height of the screen, even when they are empty, so I can showcase th ...

Leveraging JavaScript's Document.write() function to generate an HTML hyperlink

I am struggling with a URL stored in a variable (var URL). My initial attempt was this: document.write("<a href='"+url+"'>LINK</a>"); Unfortunately, it is not working as expected. Any suggestions on how to fix this? This is the ex ...