What is the process for displaying text along an arc in Three.js?

Is there a way to properly space out text along an arc using Three.js? I found some help on this post for the rotation math, but the text is currently jumbled on top of itself. Any suggestions on how to fix this? Check out the Codepen here.

var container, camera, scene, renderer;

function init() {
  container = document.getElementById( 'canvas' );
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 100000);
  camera.position.z = 500;
  scene.add(camera);

  var loader = new THREE.FontLoader();
      loader.load( 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_bold.typeface.json', function ( font ) {


  var theText = "This is some text."

  var numRadsPerChar = 2*Math.PI/theText.length;

  for (var i = 0; i < theText.length; i++){
    var char = theText[i]
   var geometry = new THREE.TextBufferGeometry( char, {
    font: font,
    size: 60,
    height: 60,
    curveSegments: 20
  });

  var materials = [
    new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
          new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
        ];

    var mesh = new THREE.Mesh( geometry, materials );
    mesh.rotation.z = (i * numRadsPerChar);
    //mesh.position.x = i * 20;
    group = new THREE.Group();
    group.add( mesh );
    scene.add( group );
    };
  } );

  renderer = new THREE.WebGLRenderer({alpha: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  animate();


} init();

 function animate() {   
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }

Answer №1

After receiving some guidance, I was able to solve the issue by making the following adjustments:

 mesh.position.x = 100 * Math.sin(i * numRadsPerChar);
 mesh.position.y = 100 * Math.cos(i * numRadsPerChar);
 mesh.rotation.z = Math.PI/2 -(i * numRadsPerChar);

The key change was adding a constant (Math.PI/2) to the rotation. Additionally, utilizing the sine and cosine functions for the x and y positions respectively ensured that the letters were properly positioned along the curve. For a visual representation of the solution, check out this codepen.

Answer №2

One alternative method is to create your text on a canvas and incorporate it into a texture with texture.wrapS and .wrapT properties set to THREE.RepeatWrapping. Next, apply this texture to a material and then attach it to an extruded path geometry. By adjusting the texture.offset.x or y within your render loop, you can dynamically move the text along the path.

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

Guide to making a button in jQuery that triggers a function with arguments

I've been working on creating a button in jQuery with an onClick event that calls a function and passes some parameters. Here's what I have tried so far: let userArray = []; userArray['recipient_name'] = recipient_name.value; userArray[ ...

Struggling to separate a section of the array

Check out this array: [ '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a171319121b1f163a1f1915080a54191517">[email protected]</a>:qnyynf', '<a href="/cdn-cgi/l/email-protection" class="__cf_e ...

Using jQuery to dynamically add a value to a comment string

Is there a way to dynamically include tomorrow's start and end times in the message for the setupOrderingNotAvailable function if today's end time has passed? The current message states that online ordering will be available again tomorrow from 1 ...

Utilizing the 'new' operator in the creation of Mongoose schema structures

Trying to figure out the discrepancy between the two methods of Schema creation in mongoose. Despite searching through the documentation and using Google, I haven't been able to find any substantial results. As a beginner in mongoose, I'm curious ...

What is the best way to connect information from an HTML input field to a JavaScript object with the help of AngularJS?

As a beginner in AngularJS, I'm struggling to find the best approach to achieve my goal. I aim to create a grid of input tags with type=number in my HTML and have it set up so that whenever the value is increased, a new object is added to a list. Simi ...

Using JQuery to find and update elements in the DOM

My goal with JQuery is to have the select attribute removed from the Default.aspx li element and added to the Feedback.aspx li element when a user clicks on a link like Feedback.aspx. <ul id="main_menu" class="main_menu ui-sortable"> < ...

Desktop display issue: Fontawesome icon not appearing

Having trouble getting the fontawesome icon to display properly on my website. It appears in inspect mode, but not on the actual site itself. Any suggestions on how to fix this issue? import React, { Fragment, useState} from "react"; import { Na ...

Error encountered: Jquery counter plugin Uncaught TypeError

I am attempting to incorporate the JQuery Counter Plugin into my project, but I keep encountering an error: dashboard:694 Uncaught TypeError: $(...).counterUp is not a function <!DOCTYPE html> <html lang="en"> <head> <script src ...

before the ajax response is received, running ahead

I've encountered an issue where I'm attempting to execute a function after an ajax return has finished using then, but it appears to be running before the return completes. Here is the code snippet in question: var existingUser = false; $.ajax( ...

The power of Karma, AngularJS, Bootstrap, and the window variable working

As I work on testing my application, I am facing an issue with loading files using Karma into PhantomJS. The problem arises when one of the files triggers a page reload due to window variables. The files are being included in this manner: files: [ &a ...

Forecast the width of an element using JavaScript

Is there a way to display tab elements on a webpage without them automatically wrapping into a new row if there are too many? Instead, I would like an arrow icon to appear at the end of the tabs so users can cycle between tab groups. The challenge is that ...

Disable the setTimeout() function in order to prevent the countdown from refreshing

I have a JavaScript countdown function that is working well, but I am unsure how to stop and refresh the timer to extend the time. When I call the function again before it times out, it behaves strangely by showing two countdown timers because the updateTi ...

Unable to retrieve button value with material-ui package

My task requires me to retrieve the value of a button, as it contains an ID essential for further steps. Initially, I used a standard button with Bootstrap styling and everything functioned correctly. <button value={row.vacationRequestID} c ...

Is it possible to use an onclick function to input JavaScript values into a password entry box seamlessly?

Is there a way to input password values continuously using a JavaScript onclick function into a password field? I have two images, one 'Blue' and one 'Red', that trigger an onclick function with the following values: Blue= w3! Red= T4 ...

Using socket.io to filter MongoDB documents by their unique object IDs

I am facing an issue where I need to retrieve a specific document from a MongoDB collection using the object ID when working with Socket.io. Since `findById()` is not effective in this case, and I am unable to use `find({ "_id" : _id})`, I am unsure about ...

Issue with serving static files in ExpressJs

I'm facing an issue with my Express app where the static files are not working properly for certain routes. For example, when I visit '/', all styles and images load correctly as expected when the index.ejs is rendered. However, when I navi ...

Encountered an error while trying to set up the route due to Router.use() needing

Within my app.js file, I have the following code: app.use('/', require('./routes')); //old routes app.use('/api', require('./api')); Additionally, I have an api folder containing an index.js file. This is what the ...

Encountered a problem initializing Rangy.js on Internet Explorer

Currently, I am developing an angular application that utilizes textAngular along with rangy-core and rangy-selectionsaverestore. However, I am encountering some errors specifically on the latest version of Internet Explorer: Module 'WrappedSelection ...

Autonomous JQuery Modules

Is it possible to separate the functions in JQuery and use only the ones needed by splitting the file with PHP? By doing this, I aim to improve page speed, save bandwidth, and have more control over the functions used through the backend. Can the functio ...

Transform the Hue or Color of a PNG using ASP.Net, VB.Net, and jQuery

I am currently developing a web page that can combine multiple PNG images into one flat image for users to download. I am looking to incorporate a feature that allows for hue or color adjustments, similar to the color balance functionality in Photoshop. ...