What is the method for incorporating a superscript string into a THREE.TextGeometry object?

My current project involves developing a dimensioning tool using Three.js. I am facing a challenge in trying to display dimensions of distances over a line between two objects, much like the example shown with 2.455. https://i.sstatic.net/8Oac2.png

Unfortunately, due to limitations in Threejs R88, HTML encoding is not supported, making it impossible to incorporate functions such as superscript in TextGeometry directly. One workaround would involve adding a second text geometry for the superscript number, but I am looking for alternative solutions that are cleaner and more efficient. Any suggestions on how to tackle this issue?

An attempt like the following does not yield the desired result:

var ss = '5'.sup();

var geometry = new THREE.TextGeometry( '2.45' + ss, {
        font: font,
        size: 80,
        height: 5});

Thank you for any insights or recommendations you may have.

javascriptstringthree.js

Answer №1

Ensure that the Font you choose has the necessary characters for your project.

Upon closer examination, I discovered the character "²" in the helvetiker_regular.typeface.json font file. However, it does not guarantee that all desired characters are included, as "⁶" was missing from the same file.

To work around this issue, consider creating regular numbers and adjusting their scale and position to appear as superscript. Three.js offers methods for combining geometries to optimize mesh creation and address any concerns about cleanliness in your design.

Answer №2

One potential solution involves utilizing the following set of unique characters:

⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹

These special characters can be accessed using ALT codes. Here is a helpful resource for finding and using these characters.

It is worth noting that these characters are compatible with Three.js for implementation.

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 could be the reason for my directive not properly interpolating the scope variable?

I attempted to create a directive that would swap out a CSS link with an inline style definition. Check out the functional version here. Now, I am hoping to achieve the same functionality using interpolation, so that I don't have to manually set the ...

javascriptangularjsangularjs-directive

JavaScript validation controls do not function properly when enabled on the client side

Following the requirements, I have disabled all validation controls on the page during the PageLoad event on the server side. When the submit button is clicked, I want to activate the validations and check if the page is valid for submission. If not, then ...

asp.netjavascriptasp.net-2.0

Implementing dynamic data binding in JavaScript templates

I've been experimenting with jQuery and templates, and I managed to create a basic template binding system: <script type="text/template" id="Template"> <div>{0}</div> </script> Furthermore... var buffer = ''; v ...

javascriptjqueryjsondata-binding

Opting for PHP over JSON for the instant search script output

Is there a way to modify my Google Instant style search script, written in jQuery, to retrieve results from a PHP script and output PHP-generated HTML instead of JSON? Below is the current code: $(document).ready(function(){ $("#search").keyup(functi ...

phpjavascriptjqueryhtmljson

What is the best way to superimpose a 3D model at specific coordinates X, Y, and Z onto a canvas using

After running my code, I receive x,y,z coordinates for each keypoint. How can I overlay a 3D object on my finger tip? I tried following the instructions from this link, but it still doesn't work! All I see is a black screen. I have already removed the ...

three.jstensorflow.js

The concept of JavaScript function aliasing appears to be ineffective

After coming across this specific question, I decided to experiment with the alias method rather than using the function-wrapper method. Unfortunately, I faced issues getting it to function properly in both Firefox 3 and 3.5beta4, as well as in Google Chro ...

javascriptfunctionclosuresalias

Textbox textchange event triggers Javascript function when Checked=True

$('.LblQTY').on('input', function () { var currentRow = $(this).closest('tr'); var rate = parseFloat(currentRow.find('.LblRate').text()); var quantity = parseFloat($(this).val() == '' ? '0& ...

javascriptjqueryhtml

Incorporate JSON data to display SVG images

As a beginner in web development, I have been honing my skills with the AngularJS framework due to its user-friendly nature. Currently, I'm working on pulling JSON data from an API using $http.get method. One of the fields contains an image source i ...

javascripthtmljsonangularjssvg

The `mounted()` hooks in a VuePress site are not triggered when the `vuepress build` command is used with the `--debug` option, although they work properly when using `vuepress dev`

UPDATE: Initially, I believed that the issue was caused by the custom theme; however, I have since revised the question. The live demo has also been fixed. I have developed a customized theme for VuePress by extending the @vuepress/theme-default with some ...

javascriptvue.jswebpackvuepress

Checking for special characters except for hyphens and forward slashes using a regular expression

I need help with a regular expression (regex) in JavaScript that checks for special characters other than hyphen and forward slash. function containsSpecialCharacters(str){ var regex = /[~`!#$%\^&*+=\-\[\]\';,/{}|&bso ...

javascriptregex

Establishing Accessor and Mutator Methods

The variables startStopA... and InitialValueA... that were originally in the component TableFields.vue need to be relocated to the store file index.js. However, upon moving them to the store, an error appears stating that setters are not set. I have extens ...

javascriptvue.jsvuex

What steps should I take to design and implement this basic search form?

Essentially, I have a three-page setup: - One page containing all possible search results such as: 'search result 1' 'search result 2' 'search result 3' - Another page with a search form and enter button. - And finally, a res ...

phpjavascriptjqueryhtml

Using JQuery for sending POST requests in JavaScript

I am currently facing an issue while trying to post JSON data to a server. I have managed to do it successfully using a certain method, which is as follows: <html> <head> <script src="http://code.jquery.com/jquery-latest.min.js">< ...

javascriptjqueryajaxjson

Encountering a problem with jQuery selectable() that causes the selections to cycle through their history before being successfully posted

My issue involves a table where users can select multiple rows, each with a unique ID. These selected IDs are then aggregated into a string and sent via POST to a php file. Everything works perfectly fine, except for one problem. When rows are continuously ...

javascriptjqueryajax

Zooming in a d3 tree graph is restricted to individual nodes only

Can anyone explain why the zoom function only activates when hovering over the node and not the entire svg? I am looking to enable zoom functionality when the mouse is over the svg, not just the node. Any help would be appreciated. Also, does anyone know ...

javascriptjqueryd3.jsgraph

How can I add margins to a Bootstrap v5 column that spans the full height and width of the content?

In this scenario, I have two rows and two columns in each row. My goal is to make the yellow blocks take up all available space in the column while having a margin. However, currently the margin disrupts the alignment of the yellow content. https://i.ssta ...

javascriptcsstwitter-bootstrapbootstrap-5

Sharing Controller variable with JavaScript file on ASP.NET MVC platform

Being new to ASP MVC, I have successfully retrieved data from a database. Now, I am looking for a way to pass that variable to a JavaScript file. This is my controller code: using (issue_management_systemEntities db = new issue_management_systemEntities ...

javascriptjqueryasp.net-mvc

Utilizing a repetitive element as a fresh offspring in the replaceChild() function

const addToCartButtons = document.getElementsByClassName('add-to-cart'); const addToCartButtonsArray = Array.from(addToCartButtons); const increment = document.createElement('img'); increment.setAttribute('src', '/assets ...

javascriptarraysloops

Merge data from api into visual charts using Google Chart Library

I received an API response with the following data structure: { "status": 200, "message": "OK", "data": [ { "_id": { "report_type": "robbery" }, "report_type": "robbery", "Counts": 11 }, { "_id": { "repo ...

javascriptjqueryjsongoogle-visualization

I'm experiencing difficulties with authenticating BigQuery in my Node.js Firebase Functions index.js file

While working on my firebase functions index.js file, I encountered an issue with the BigQuery API. Every time I try to initialize the BigQuery instance, I end up receiving an internal server error. Initially, I attempted to include my service account key ...

javascriptnode.jsfirebasegoogle-bigquerygoogle-cloud-functions