The textgeometry element is not appearing in the three.js scene

I've inserted a boxgeometry into the scene with the intention of adding text to indicate the side of the cube. However, I am encountering difficulties in incorporating textgeometry into the scene.

This is my code:

const loader = new FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json',
function ( font ) { const geometry = new TextGeometry( 'Hello three.js!', { font: font, size: 80,                                                                                                                                                         height: 5, curveSegments: 12, bevelEnabled: true, bevelThickness: 10, bevelSize: 8, bevelOffset: 0, bevelSegments: 5 } ); } );

I have saved the helvetiker_regular.typeface.json file in the fonts directory but was unable to retrieve the path. Any suggestions or assistance would be highly appreciated

javascriptthree.js

Answer №1

If the URL doesn't load the Json file imports directly, you'll need to first include the file path in the imports section and then specify the component name.

       var loader = new THREE.FontLoader();
       var font = loader.parse(helveticaRegular); 
       var textGeometry = new THREE.TextGeometry( 'Hello three.js!', 
       {font: font,
        size: 1,
        height: 0.1, 
        curveSegments: 20 } );
       var textMaterial = new THREE.MeshBasicMaterial( { color: 
       0xF00000 } ); 
       var textMesh = new THREE.Mesh( textGeometry, textMaterial ); 
       this.scene.add(textMesh);

I opted for the helveticaRegular Font file here. If you prefer your own font, you can do so by downloading a TTF file and converting it to Json using this link:

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

ScriptManager is not accessible in the current ASP.Net Core Razor Page context

I'm facing an issue where I have a view (such as Index.cshtml) and a page model (like Index.cshtml.cs). In the view, there's a JavaScript function that I want to call from the OnPost() method in the page model. I tried using ScriptManager for thi ...

javascriptc#htmlasp.net-corerazor-pages

Guide on transferring Context to the loader in React-Router-6

In my development setup, I am utilizing Context for managing the global loading state and React-router-6 for routing. My approach involves incorporating loader functionality in order to handle API requests for page loading. However, a challenge arises when ...

javascriptreactjsreact-router-domreact-context

Adjusting the minimum value on a textfield with JQuery Validate plugin in real-time

I am attempting to dynamically update the minimum value on one field based on input from other fields. Here is a brief overview of my code: $("#new_project").on("click", function() { switch($('input:radio[name=quality-level]:checked').val() ...

javascriptjqueryvalidation

JQuery loader & amazing animations

I have implemented the wow.js plugin along with a jQuery preload tutorial from here. Although the preloader works fine, I am facing an issue where the animation by wow.js starts before all the elements on the page are preloaded. I am looking to modify my ...

javascriptjquerywow.js

Unexpected issue on AngularJS application

Encountering issues with incorporating a controller into my page - each time I add it to a DOM element, an error is thrown. Here's the structure of my HTML page: <html data-ng-app="sportsStore"> <head> <title>Sports Sto ...

javascripthtmlangularjsangularjs-directive

The arrangement of a JSON array can be modified by AngularJS' Ng-repeat functionality

Hello everyone at SO: On March 18, 2014, I encountered a situation while trying to use ng-repeat. The elements inside the array, retrieved from a Json string, seem to be changing their original order. To clarify, the initial variables in the array pertai ...

javascriptjsonangularjsangularjs-ng-repeat

The gear icon in the video player is not showing up when I try to change the

I am currently trying to implement a feature that allows users to select the quality of the video. I am using videojs along with the videojs-quality-selector plugin, but even though the video runs successfully, the option to choose the quality is not appea ...

javascriptvideohtml5-videovideo.js

Using Typescript with Protractor for Dropdown Menus

As a newcomer to Protractor, I am looking to automate the selection of a dropdown. While I have some knowledge in JavaScript, I am currently working with typescript. Can someone advise me on how to select the dropdown option based on the text provided? Fo ...

javascripttypescriptdrop-down-menuprotractor

Executing MySQL queries through JavaScript functions

I need to create a PHP function that I can use in my JavaScript code. The issue I'm facing is that the variables from the beginning of the file are not recognized in the JavaScript block. <!DOCTYPE html> <?php include 'pdo_connect.php&a ...

javascriptphpmysqlajax

Error: The global variable cannot be emptied due to an issue with the Ajax request

As someone who is relatively new to the world of Javascript/jquery and async, I have spent a significant amount of time reading through various forums. Unfortunately, I have yet to come across a solution that addresses my specific issue. The problem at ha ...

javascriptjqueryajax

Unable to close Bootstrap modal upon clicking "x" or "close" buttons

Hey everyone, I'm having a bit of trouble with my modal. It appears correctly when clicked to open, and the close buttons seem to detect that my mouse is hovering over them. However, when I click on the buttons, nothing happens and the modal remains o ...

javascripthtmlbootstrap-4

Using jsPlumb to Access an Element After a "Mouseup" Event has Completed

$(document).on('mouseup', '.agent-wrapper', function(info){ console.log(info); // Everything is working fine console.log(this); }); .agent-wrapper represents an element-wrapper for all jsPlumb objects. $(document).on(' ...

javascriptjqueryjsplumb

If an element with a "hidden" display property is loaded in the browser window, will it be visible?

Is an element in a hidden display still using memory when the page is loaded? It's convenient to have many elements on a page, but if 99 elements are hidden and only 1 is displayed, does that impact the loading of the page? I'm curious if the pa ...

javascriptcss

Enhance the sequence of tweens by triggering them sequentially in response to rapid UI events

I am currently working on my three.js app setup and I am facing a challenge with creating a smooth transition between two models. The desired effect is to have the first model quickly scale down to zero, followed by the second model scaling up from zero t ...

javascriptthree.jstween.js

"Exploring the symbiotic relationship between Node.js and Express.js: an

I recently started learning Node.js and Express.js. I used the Express.js executable (express) to create an express application, which generated the following lines in app.js: ... var app = express(); http.createServer(app).listen(app.get('port' ...

javascriptnode.jsexpress

What is the best way to control the class name of elements using jQuery in an MVC4 application?

Among the <li> elements, one of them contains the class "current". Determining which <li> is the current one. View below: @{ int k = 10; //the value changes with each request } <ul class="car"> @foreach (var item in modelCoun ...

javascriptjqueryasp.net-mvchtml-lists

Failure to retrieve blob - net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

My fetch request code in my front end for a node js express web app hosted on MS Azure works well for small zip file blobs. However, it times out and displays the error net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK) when dealing with large blobs. ...

javascriptnode.jsexpressfetchblob

To extract three records from storage and store them in the dbResult using a promise join technique

How can I efficiently retrieve and store 3 records in dbResult using promise join? Currently, I have code that retrieves a single record as shown below: req.oracleMobile.storage.getById(registry.getIncidentPhotoStorageName(), incident_id + '_01&apos ...

javascriptnode.jsnpmpromisebluebird

Utilizing ng-repeat, filter, and the uib-popup-datepicker to refine and display specific data within a table column

I'm currently facing a common scenario in my Angular application where I need to filter items from an ng-repeat using an HTML5 input of type 'date' or Angular-UI-Bootstrap's 'uib-popup-datepicker'. Despite extensive research, ...

javascriptangularjshtmldateangular-ui-bootstrap

Load images in advance using this script

Using a script to load images on two websites, the image is placed inside a div with the ID div-to-load-external-image Encountering an issue where PageSpeed Insights advises to preload these images, seeking guidance... Any assistance will be appreciated. ...

javascriptoptimizationpreload