Exploring alternative font options in Three.js for a unique visual experience

For my current project, I am working with three.js and I am interested in using a font other than the default "helvetiker". After some research, I learned that I need to convert the font using typeface.js to obtain a font file. I have successfully converted the font, but now I am struggling to integrate it into three.js. I have explored various examples in three.js by mrdoob but couldn't find a solution. I also noticed a loadFace function in THREE.FontUtils within the three.js source code, but I am unsure how to implement it. As this is my first project with Three.js, any guidance on this matter would be greatly appreciated. Thank you!

Greg

javascriptfontsthree.jstypeface.js

Answer №1

This question seems to be unanswered so far. To find the necessary font name for threejs, you'll need to locate it at the end of the typeface (js) file. The format should be as follows:

"familyName":"fontname"

In threejs, make sure to use the name inside the quotes, but in lowercase. For example, if the font is "Old English Text MT", you should input it as:

font: "old english text mt"

If you make any changes to the text after "familyName" in the (js) typeface file, such as "familyName":"cAt aNd DOg", then you need to use that exact wording. Your threejs declaration should reflect this:

var text3d = new THREE.TextGeometry(n.text, { size: 15, height: 10, curveSegments: 10, font: "cat and dog" });

Make sure to place your (js) typeface file in the header section of your website, like so:

<script src="fonts/droid/droid_serif_bold.typeface.js"></script>

Lastly, if you need a (js) typeface file generator, you can visit this link:

Answer №2

For my project, all I needed to do was import the font using a script tag and update the font in the TextGeometry section:

let text3d = new THREE.TextGeometry(text.content, {
  size: 12,
  height: 6,
  curveSegments: 3,
  font: "open sans"  //modify this line
});

As far as I know, there are no additional steps that need to be taken.

Answer №3

According to Tim, the main challenge lies in correctly identifying the font name. It appears to be the "family name" found within the generated javascript, specifically font_family_name, in lowercase with spaces. You have the option to modify it within the .js file if you believe it would be more convenient - I have personally made adjustments to it myself as shown on this page.

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

Using async/await with Middleware in Express

I'm struggling to grasp the concept of writing middleware in Express that uses async/await without leaving a floating Promise after execution. Despite reading numerous blogs and StackOverflow posts, it appears that there is a common pattern for utiliz ...

javascriptexpressasync-awaites6-promisemiddleware

Rendering on the server with React: Utilizing server-side rendering to display product information with passed-in :productId parameters

Having an issue with my React app that is rendered on both the client and server (Node and Express). When someone types in the URL directly, the application crashes because it cannot parse the '1' in the URL to fetch the correct product. If a l ...

javascriptexpressreactjswebpackreact-router

After utilizing the function, the forward and back arrows are no longer visible

After setting up my slideshow, I encountered an issue where clicking the next or previous buttons caused them to shrink down and turn into small grey boxes. Has anyone experienced this before? This relates to PHP/HTML if ($_SERVER['REQUEST_METHOD&ap ...

javascriptphpjqueryhtmlcss

What are the best practices for utilizing ESM only npm packages alongside traditional npm packages within a single JavaScript file?

Hey there, I'm fairly new to web development and I encountered a problem when trying to require two packages, franc and langs, in my index.js file. It turns out that franc is now an ESM only package, requiring me to import it and mention type:module i ...

javascriptnode.jsnpm

Expand the boundaries of the MUI Select to encompass a different element

Is there a way to extend the border of the MUI Select dropdown menu around the IconButton next to it? I have set up sorting options (A-Z, newest-oldest) using the Select component and included a button to reverse the direction (Z-A, oldest-newest). However ...

javascriptreactjsselectmaterial-uiborder

What is the best way to incorporate a CSS transition without any dynamic property changes?

Is there a way to add a transition effect to a header when its size changes without a specified height value in the CSS? The header consists of only text with top and bottom padding, so as the text changes, the height adjusts accordingly. How can I impleme ...

javascripthtmlcsscss-transitions

What is the best way to construct a JSON object for React based on the data from a JSON API response?

My API will be sending back data in the following format: [ { "id":5, "name":"Example", }, { "id":634, "name":"Test", }, ... ] In my React application, I need to create a JSON object like this: const fields = ...

javascriptjsonjavascript-objects

Transmit data via XMLHttpRequest in smaller portions or through a ReadableStream to minimize memory consumption when handling large datasets

Recently, I've been experimenting with JS's XMLHttpRequest Class for handling file uploads. Initially, I attempted to upload files using the following code: const file = thisFunctionReturnsAFileObject(); const request = new XMLHttpRequest(); req ...

javascripttypescriptxmlhttprequeststreaming

Having trouble getting Three.js JSON models to cast shadows properly?

Recently, I've been experimenting with blender exported models in Three.js. I have successfully imported a model and observed how light interacts with the object. While a directionalLight is illuminating the front-facing parts, I'm facing an issu ...

javascriptjsonthree.js

Cannot find a function within the Promise

Here is the code snippet I am working with: var c = function(address, abiJson){ var _ = this; this.data = { wallet: false, account:{ address: false }, contract:{ addre ...

javascript

Creating a unique field button in AngularJS that is dynamically generated and specifically targeted as the last button

Is there a way to enable the plusSign = true option only for the last item in the dynamic input field? (function() { var app = angular.module('managementApp', []); // var app = angular.module('managementApp', ['ngRoute' ...

javascriptangularjsdynamicangularjs-ng-repeat

How can I retrieve a list of downloads utilizing the Chrome.downloads api?

I have developed an extension that needs to display all the downloads from the user's downloads folder on a webpage instead of opening the download folder directly. Below is the code I have implemented: window.onload = function(){ var maxNumOfEn ...

javascripthtmlapigoogle-chromegoogle-chrome-extension

Automated form with built-in calculations

Whenever a product is selected from the dropdown menu, the price value should be automatically filled in the input field with ID #price. Then, the user can enter the quantity in the input field with ID #quantity, and the total sum of price multiplied by qu ...

javascriptjqueryformsinput

Ways to clear away adhesive header and maintain its fixed position

I've been tinkering with my website, which you can find at this link: . I used the html5 up template for it, and the template came with a sticky header. However, when the site is viewed on a smaller screen, there's an ugly gap that forms between ...

javascriptcsshtmlscrollsticky

What are the best techniques for distinguishing the selected selector in jQuery?

$('#select_id1, #select_id2, #select_id3').change(function() { // Depending on which select element has changed, 'str' should be set accordingly. // For '#select_id1', 'str' should be equal to 'select_id ...

javascriptjquery

When utilizing auth0, an error occurs during the grunt build process

I successfully developed a small project using AngularJS on my local machine without encountering any issues. However, when I attempted to build the project with Grunt, everything stopped working and an error occurred: vendor.ce3c01a3.js:2 Error: [$inject ...

javascriptangularjsgruntjsauth0

Click the button to instantly scroll to a particular word with highlighting, and with another click, jump to the next occurrence

In order to achieve the objective, simply click on a button that will search for and scroll to a specific word while highlighting it. The same button can be clicked again to find the next occurrence, and so on. If you need an example of how this works, ch ...

javascripthtmljquery

The useEffect hook is not successfully fetching data from the local db.json file

I'm attempting to emulate a Plant API by utilizing a db.json file (with relative path: src\plant-api\db.json), and passing it from the parent component (ItemList) to its child (Item) but I am facing an issue where no data is being displayed ...

javascriptreactjsfetch-api

Ways to access a JavaScript function on a div with multiple identifiers

Currently working on developing a discussion panel using ASP.net, where each comment is assigned a unique id. I am looking to trigger the jQuery click function whenever a user clicks on a comment. However, since the comment ids are dynamically assigned an ...

c#javascriptjqueryasp.net

Is it possible for a MySQL loop to only delete the first entry?

My MySQL looping is not working properly when I click the second button to get their id and continue with the rest of the process. Why is this happening? $(document).ready(function() { $("#deleteSchedule").click(function (e) { e.preventDefault(); ...

javascriptphpjquerymysql