When attempting to create text with Three.js using the TextBufferGeometry method, an error arises indicating that the property yMax is unreadable due

While trying to add text to a three.js scene, I encountered the error message "Uncaught TypeError: Cannot read property 'yMax' of undefined".

let loader = new THREE.FontLoader();

  let font = loader.parse( jsonFont );

  let geometry = new THREE.TextBufferGeometry( 'MY TEXT', {
        font: font,
        size: 80,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelSegments: 5
  } );

Upon checking the console in Chrome, the complete error message displayed is:

Uncaught TypeError: Cannot read property 'yMax' of undefined <-- createPaths <-- generateShapes <-- TextBufferGeometry

javascriptthree.js

Answer №1

I managed to find the answers to my dilemmas.

Seeked Solution: https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text_shapes.html

Error in My Code: https://github.com/mrdoob/three.js/issues/13665

|---------------|

This particular code did the trick for me:

let loader = new THREE.FontLoader();
loader.load( "/fonts/helvetiker_regular.typeface.json", ( font ) =>
{
  let xMid;
  let shapes = font.generateShapes( "Sample Test", 100, 2 );

  let textShape = new THREE.BufferGeometry();
  let geometry = new THREE.ShapeGeometry( shapes );
  geometry.computeBoundingBox();

  let material = new THREE.MeshBasicMaterial( {
                                               color      : 0x006699,
                                               transparent: true,
                                               opacity    : 0.4,
                                               side       : THREE.DoubleSide
                                             } );

  xMid = -0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
  geometry.translate( xMid, 0, 0 );

  textShape.fromGeometry( geometry );
  let mesh = new THREE.Mesh( textShape, material );
  m_scene.add( mesh );

} );

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

What is the best way to incorporate multiple input boxes into a single alertbox for repeated use?

I attempted to use the same alertbox for 3 different input elements by converting it into a class and using getElementsByClassName, but unfortunately, it did not work as expected. Here is what I tried: <input type="text" class="form-control date notif" ...

javascriptphphtml

Improving the quality of shadows in Three.js

I'm looking to create realistic shadows in my scene using a DirectionalLight to simulate sunlight. However, I'm struggling with the shadow quality settings - toggling between on/off, Low, Normal, and High: Setting parameters a and b within these ...

javascriptthree.js

invoking a parent function from a cellRenderer in Vue.js Ag-Grid through emit function

I integrated the ag-grid-vue into my project and added a separate component to one of the columns for user actions, such as Edit, View, or Delete. Editing and deleting records work fine, but when a record is deleted, I want the table to re-render by fetchi ...

javascriptvue.jsvuejs2ag-gridag-grid-vue

Using observables rather than promises with async/await

I have a function that returns a promise and utilizes the async/await feature within a loop. async getFilteredGuaranteesByPermissions(): Promise<GuaranteesMetaData[]> { const result = []; for (const guarantees of this.guaranteesMetaData) { ...

javascriptangularrxjs

Invalid web address entered

While attempting to incorporate a functionality that opens a new window to a specific link when clicking an icon, I encountered an issue where the click action redirects to the wrong URL. Instead of directing to the URL specified in its href attribute, it ...

javascripthtmlurlhref

Turning off strict mode in the bundling process of React with webpack can be achieved by following

I'm facing an issue with my application. It works perfectly in all browsers except for IE, where it throws the following error: 0x800a0416 - JavaScript runtime error: Multiple definitions of a property not allowed in strict mode In my webpack.config ...

javascriptreactjswebpackstrict-mode

What is the preferred method for initiating a call from a JSP to a servlet using an href link?

Currently, I am successfully using href to call a servlet URL. However, I would like to add parameters and receive a response from this request. Is it possible to achieve this? I attempted an AJAX call but encountered a CORS issue when trying to call an ex ...

javascriptjavaajaxjspservlets

Using caret range and package-lock.json to acquire the most recent non-disruptive versions

I understand the purpose of package-lock.json, but I'm unsure about how the caret range works after adding this file. Let's say I have a package called my-module and I want to automatically receive all new non-breaking versions without manually ...

javascriptnpmpackage-lock.json

Deactivate and circumvent Angular routing outside of the specified route URL

I am looking for a way to disable and bypass Angular routing when I have static pages or PHP-rendered views in my hybrid PHP and AngularJS app. Instead of being redirected by Angular's routing, I want to perform a full page reload to the routed link o ...

javascriptphpangularjs

How to showcase Twitter Track API on a website

const twitterRequest = twitter_oauth.post( "https://stream.twitter.com/1.1/statuses/filter.json?track=twitter", access_token, access_token_secret Hello, I have successfully implemented a track to display all the latest tweets containing the word "Twitter" ...

javascripthtmltwittertwitter-oauth

Unable to access account: HTML Javascript login issue

Problem with Login Code As a newcomer to HTML, CSS, and almost unknown in Javascript, I sought help from others to create a login code. The code was working fine earlier, but now it's not functioning as expected. Despite checking everything, I can&ap ...

javascripthtmlcss

Can TSLint and ESLint give a warning when a function is accessed as a property?

There have been instances where I've made this specific mistake, and I'm curious if there are any ESLint or TSLint rules in place that could detect it. if (this.isBrowser && this.imageURL) {.....} private isBrowser(): boolean{ retur ...

javascripttypescripteslinttslint

What is the best way to create a button that will trigger a modal window to display a message?

I am looking to create a button that will open a modal window displaying a message. However, when I tried to add a label and viewed the page, the desired window appeared on top of the rest of the content. But unfortunately, clicking the button did not prod ...

javascripthtmlcss

Using a node module for Three.js path manipulation

Currently, I am in the process of learning Three.js and have set up a basic project that runs on a node.js server while importing Three.js as a node module. Although my setup is working fine, I find myself a little bit confused about whether this is consi ...

javascriptnode.jsnpmwebpackthree.js

Setting null for HttpParams during the call

I am encountering an issue with HttpParams and HttpHeaders after upgrading my project from Angular 7 to Angular 8. The problem arises when I make a call to the API, as the parameters are not being added. Any assistance in resolving this matter would be gre ...

javascriptangulartypescript

How to toggle classes on specific items generated with Vue JS's v-for directive

I have a list rendering using the v-for directive in Vue.js. <li v-for="group in groupList" :key="group.id" @dragenter="toggleClass ...."@dragleave="toggleClass ...." > Content </li> My goal is to apply a class to the li el ...

javascriptvue.jsdrag-and-dropv-for

An issue with Ajax's syntax

Help needed with my ajax code. I'm encountering an error while trying to send data in Ajax - specifically with the data syntax. Despite several attempts, I have not been able to successfully resolve this issue. Here is the portion of code causing tro ...

javascriptajax

How to access a class from another JavaScript file using a function call

The title may seem strange, but I will do my best to explain the situation clearly. I have a website with a navigation bar where each tab corresponds to a different php file. All the files share a common js and css file. The directory structure is as foll ...

javascriptphpjquery

Guide on embedding PHP code into a HTML div element using JQuery

I am having trouble loading PHP code into a div tag to display the results. The code I have listed below does not seem to work for me. If anyone can offer assistance in resolving this issue, I would greatly appreciate it. Here is the code snippet: <h ...

javascriptphpjqueryhtml

Encountering an Unknown Error while Parsing JSON in Google Apps Script

Having trouble parsing JSON data retrieved from an API call. The error message "TypeError: Cannot read property "id" from undefined. (line 42, file "")" keeps popping up. I'm fairly new to Apps Script. Any thoughts on what might be causing this issue? ...

javascriptjsonparsinggoogle-apps-script