Issues with rendering TextGeometry in Three.js

Despite my attempts to replicate the demo code, I am unable to successfully render TextGeometry. The necessary font file is correctly uploaded on the server.

    var loader = new THREE.FontLoader();

    loader.load( 'fonts/open-sans-regular.js', function ( font ) {

        const textMaterial = new THREE.MeshBasicMaterial( { color: 0x00ffff } )

        const textGeometry = new THREE.TextGeometry('asdfasdfasdfdsf',
        {
            font: font,
            size: 300,
            height: 200,
            curveSegments: 4,
            material: textMaterial
        }
    )

        textGeometry.translate(20, 50)
        const mesh = new THREE.Mesh(textGeometry, textMaterial)
        scene.add(mesh)

    } );
javascriptthree.js

Answer №1

 <script type="text/javascript" src="Font.js" ></script>
 <script type="text/javascript" src="FontLoader.js" ></script>
 <script type="text/javascript" src="FontUtils.js" ></script>
 <script type="text/javascript" src="TextGeometry.js" ></script>
 <script type="text/javascript" src="helvetiker_regular.typeface.js">  
 </script>

This is a snippet of code that may assist in creating 3D text. By including these files first, the process might be facilitated.

 var textMat = new THREE.MeshBasicMaterial({color:0x000000});
 var textGeo = new THREE.TextGeometry("text",{
    size : 15,
    height: 1,
    curveSegments: 3,
    font: 'helvetiker',
    weight: 'normal',
    bevelThickness: 3,
    bevelSize: 0,
    bevelEnabled: true
  });
  var textMesh = new THREE.Mesh(aboutmeGeo,bulletMat);
  textMesh.position.set(x,y,z);
  function createText(){
  scene.add(textMesh);
  }
  function removeText(){
  scene.remove(textMesh);
  }

If you are using threejs r80, you can download FontLoader.js and Font.js. Additionally, FontUtiljs can be found at: https://github.com/kriffe/threejs-extras. For helvetiker_regulartypefacejs, it is recommended to use an older version of threejs. Hopefully, this information proves helpful to you. ^-^

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

Sharing Variables with $(document).ready

I need help understanding why this code is not functioning and how I can fix it. Despite my efforts to use namespaces and IIFEs, I am still unable to make it work. $(document).ready(function() { alert (hi); }); $(document).ready(function() { var hi = ...

javascriptjqueryhtml

What steps can I take to address the problem of my undefined .length value?

I encountered a length error while executing line 2 in this code snippet. index.js:10 Uncaught TypeError: Cannot read property 'length' of undefined" Sample Code: <div class="formCustomerName"> <label>Name:</label> ...

javascript

learning how to combine two json arrays of objects and showcase them in a react component

What is the best way to combine this data and present it in a table with a map using React? The text will be in the first column and the count in the second. const handleSubmit = async (event) => { event.preventDefault(); let URL1 = " ...

javascriptreactjsoop

Vue appears to be having trouble waiting for the axios Post request

While testing a login request, I encountered an issue where jest did not call the mock: This is my test : const User = '123123' jest.mock('axios', () => ({ get: jest.fn(), post: (_url, _body) => new Promise((resolve, reject ...

javascriptvue.jsjestjsaxios

Dynamically loading an iFrame source and automatically populating input forms using Javascript explained

My current challenge involves retrieving URL parameters successfully and using them to decide which iframe src to populate. Additionally, I need to autofill the form created via the form src with other parameters. However, I am faced with two main issues. ...

javascriptiframedynamiconloadautofill

How to use Typescript to find the length of an array consisting of either strings or

I am trying to determine the length of a string or array, stored in a variable with the data type var stepData : string | string[]. Sometimes I receive a single string value, and other times I may receive an array of strings. I need the length of the array ...

javascriptarraystypescriptangulartypescript1.5

Maintain hover effect of main menu on sub-menu in CSS3 flip dropdown menu

Check out the fiddle I created for my query https://jsfiddle.net/e7te8hf1/ <section id="action-bar"> <div id="logo"> <a href="#"><img src="img/logo.png"></a> </div><!-- end logo --> <nav class="navbar navigat ...

javascripthtmlcssflip

Adding data to a subdocument array with Mongoose's $push method

Here is the model that I am working with: var Customer = mongoose.model('Customer', { firstname : String, lastname : String, phone : String, street : String, city : String, state : String, zip : String, fixed : Bo ...

javascriptnode.jsmongodbmongoose

The best method for quickly loading a webpage that is over 20MB in size

My website is a single-page calendar featuring a full year's worth of images. With 344 requests and a total load size of 20MB, the page consists of a simple PHP script without a database. The requests include a CSS file (15KB), 4 JS files (20KB), two ...

javascriptphpjqueryhtmlimage

Using a CSS gradient with a variable in React.js - A guide to implementation

Looking to incorporate the following CSS property into the Navlink component. In the CSS file, the property is usually written like this using gradient. .ele { background-image: linear-gradient(45deg, #808080 25%, transparent 25%), li ...

javascriptcssreactjsreact-hookscss-gradients

Achieve multiple returns of a function by employing .fadeOut() iteratively instead of just once

I'm not sure if it's supposed to behave this way, but I believe it is... Initially, I thought there might be an issue with my entire script so I created a new file on localhost to test just the fadeOut(); function. To my surprise, the function ...

javascriptjquery

Increase the current time by 50 minutes

I have a dropdown menu with various time options like this: <select name="" id="delyvery-hour"> <option value="18:00">18:00</option> <option value="18:05">18:05</option> <option ...

javascript

Comparing elements in one array to elements in another array

In AngularJS, the $scope.categories array is populated from a multi-select element. $scope.categories = ["Adventure", "Strategy"] To compare this array with the categories in the items array below: $scope.items = [ { title: "Star Wars", ...

javascriptarraysangularjsloopsfor-loop

Ajax TabContainer mysteriously vanishes during Postback

I'm currently working on a GIS web application using C# ASP.net. Within my project, I have an Ajax TabContainer that houses multiple TabPanels containing various elements like a map window and scale bar from the ESRI WebAdf toolkit. Below is a simpl ...

c#javascriptjqueryasp.netcss

The required validator in Mongoose is not being triggered by the function

I'm trying to use a function as a validator in a mongoose schema, but it doesn't seem to work if I leave the field empty. The documentation states: Validators are not run on undefined values. The only exception is the required validator. You ...

javascriptnode.jsmongodbvalidationmongoose

The designated <input type=“text” maxlength=“4”> field must not include commas or periods when determining the character limit

In the input field, there are numbers and special characters like commas and dots. When calculating the maxLength of the field, I want to ignore special characters. I do not want to restrict special characters. The expected output should be: 1,234 (Total ...

javascripthtmlangularjstypescript

retrieve the position of a descendant element in relation to its ancestor element

I'm encountering a challenge while attempting to solve this issue. I have elements representing a child, parent, and grandparent. My goal is to determine the offset position of the child (positioned absolutely) in relation to the grandparent. However, ...

javascriptjqueryhtmlcss

Error in Jquery click function not being triggered

I'm in the process of developing an eCommerce platform where users can choose options and have their shopping carts automatically updated using jQuery. Users will be presented with a few radio buttons to select from, and as they make their choice, th ...

javascriptjqueryhtml

Tips for enabling the TypeScript compiler to locate bokeh's "*.d.ts" files

I recently made the switch from Bokeh's convenient inline extension framework to their npm based out of line build system. I'm currently working on getting my extension to build, but I've noticed that Bokeh organizes all TypeScript *.ts.d fi ...

javascripttypescriptbokehtsconfig

Generating hierarchical structures from div elements

Looking for guidance on how to parse a HTML page like the one below and create a hierarchical Javascript object or JSON. Any assistance would be much appreciated. <div class="t"> <div> <div class="c"> <input t ...

javascriptjqueryjson