Creating curved text elements with ThreeJS

Recently, I came across this repository showcasing an example that is almost 2 years old. However, the example does not work with the latest versions of threeJS.

Upon testing, I encountered the following error and warnings:

Error: THREE.Matrix3.getInverse no longer accepts a Matrix4 argument.

Warning: THREE.Matrix3.getInverse(): cannot invert matrix as determinant is 0.

The resulting bending effect shown in this screenshot also appears to be incorrect. Despite attempting to adjust the bending axis, I have had no success.

I am uncertain if these errors and warnings are causing the issue, but nonetheless, how can I update this library to function with newer releases of threeJS? Alternatively, is there another method to achieve text bending similar to the example from the mentioned repository?

javascriptthree.js

Answer №1

Recently, there was a tweak in the THREE.js script, but don't worry, adjusting the BendModifier.js is a piece of cake. Simply replace the following lines:

var InverseP =  new THREE.Matrix3().getInverse( P );

with 

newVertices[i] = new THREE.Vector3(); newVertices[i].copy( geometry.vertices[i] ).applyMatrix3( InverseP );

with Matrix4 in both cases - this way they will look like:

var InverseP =  new THREE.Matrix4().getInverse( P );

and

newVertices[i] = new THREE.Vector3(); newVertices[i].copy( geometry.vertices[i] ).applyMatrix4( InverseP );

I gave it a try with three.min.81.js and it worked smoothly.

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

The keyboard fails to open when trying to input text on a WKWebView

Is there a way to programmatically open the keyboard in a WkWebView for tel text input after a JavaScript function call? I want the keyboard to display for efficiency reasons when a certain input is activated, but it doesn't gain focus automatically. ...

javascriptjqueryioskeyboardwkwebview

When a row is clicked, retrieve the data specific to that row

I have implemented a data-grid using react-table where I pass necessary props to a separate component for rendering the grid. My issue is that when I click on a particular row, I am unable to retrieve the information related to that row using getTrProps. ...

javascriptreactjssetstatereact-table

Warning: data and salt parameters are necessary, please provide them

Issue: I am encountering an error with registering a new user, specifically when using Postman. I'm not sure why this error is occurring only in Postman. Additionally, I am facing proxy problems where requests cannot be proxied from localhost:3000 to ...

javascriptreactjsexpressauthenticationbcrypt

Setting an interval for a specific function to trigger after a delay of 5 seconds

I'm struggling with setting an interval for the $.get ajax method in my code. Take a look at what I have so far... setInterval(function () { passFunction(jsonData); } ,5); $.get({ url: 'pass.php', success: ...

javascriptjqueryajaxsetintervals

What could be causing this jQuery selector to not select any elements?

Here's a simple question with some code that needs troubleshooting: $insides = $('<thead><tr><th><!--Blank space --></th></tr></thead><tbody><tr class="green-row"><td>Opportunities to D ...

javascriptjqueryhtmldom

Ways to invoke a jQuery plugin method from outside the plugin script

I have the following script code (function($) { $.fn.youamaAjaxLogin = function(options) { function start() { //start } .... Is there a way to call the start() function from outside? (func ...

javascriptjqueryhtml

What is preventing the transfer of array[i].charAt(0).toUpperCase() to array[i][0]?

I am currently working on a JavaScript program that is designed to capitalize the first letter of each word in a string while converting every other character to lowercase. function titleCase(str) { str = str.toLowerCase(); var array = str.split(" " ...

javascriptarrays

Focusing on pinpointing certain mistakes within Drupal 7

When working with Drupal, encountering errors is a common issue. While some errors are simple to fix, others can be quite complex and require significant time and effort to resolve, even if the website appears to function normally despite the error. My qu ...

javascriptjquerydrupaldrupal-7

Is it possible to update the state of a specific object by utilizing dynamic form handling techniques?

Trying to dynamically accept state changes from a medium-sized form without hard coding each input's name poses a challenge. The issue lies in the fact that the state consists of diverse categories, such as: this.state = { data: { account: { ...

javascriptreactjs

The jQuery attribute selector seems to be malfunctioning when targeting data attributes

Although this question may resemble others on SO like Selecting element by data attribute and jQuery how to find an element based on a data-attribute value?, I am still struggling to select all elements where the attribute "data-value" exists. The Issue ...

javascriptjqueryjquery-selectors

Storing dates as collection names is not supported in Firestore

I'm currently facing an issue trying to store stock prices in Firestore. I want the structure to resemble something similar to SQL, like this: const d1 = new Date(); const result = d1.getTime(); console.log('Epochtime',result); database.coll ...

javascriptfirebasegoogle-cloud-firestorenosql

Updating Mapped Components with Selected State

One of the components in my project is a mapped component that dynamically displays API data. Each card displayed by this component receives unique props, resulting in cards that look different from one another. An example can be seen below. View Example ...

javascriptreactjsstate

Display the feedback within the div container

I am using AJAX to call a method and I'm receiving a response successfully. However, I am struggling to display that response in a div. I want the response to be shown in a #result div element. <div id="result"></div> <input type="butt ...

javascriptc#asp.netajaxasp.net-mvc

Transform the apply() method to use an indefinite amount of input variables and make it asynchronous

This is the piece of code that I am currently working on let multiplyTwoNum = (foo, bar, cb) => { cb(null, foo * bar) } let multiplyThreeNum = (foo, bar, param, cb) => { cb(null, foo * bar * param) } function multiplyAnyNumbers(f) { f.apply( ...

javascriptnode.jsargumentsprototypeapply

What is the best method for effortlessly inserting multiple images into a web form that are sourced from a database?

Greetings, I am currently in the process of creating a page where users can view specific car details and related photos. At the moment, I am utilizing a SQL table to store the image paths and then manually assigning each path as an "ImageUrl" attribute to ...

c#javascriptasp.net

Use the 'url' parameter to pass into the ajax function when using jQuery for online requests

I am working with an ajax code that retrieves data from an XML file locally. <script> function myFunction() { $("#dvContent").append("<ul></ul>"); $.ajax({ type: "GET", url: "test.xml", ...

javascriptjqueryhtmljsonxml

The process of verifying email addresses using Angular 5

I'm having trouble validating my email with the .com domain. I've tried various methods, but so far, none have worked. Can anyone provide guidance? I'm new to Angular and struggling with this particular issue. Ideally, I want the email to be ...

javascripthtmlangulartypescript

Once I have verified the accuracy of certain $_POST variables, I am looking to close my window. Is there a way to achieve this using JQuery?

<?php if($_POST["some_variable"]){ echo "this window should be closing now"; } ?> How do I implement a JQuery function to close the window? The code snippet below demonstrates how the window was initially opened... $('.new_windo ...

phpjavascriptjqueryhtml

Are Three.js shaders for normal mapping calculating lighting in the tangent space?

As I was diving into the world of Three.js, something peculiar caught my attention that has left me scratching my head. In most other systems I have worked with (outside of web development), lighting for normal maps is typically calculated in tangent spac ...

three.js

Using JavaScript to animate a background composed of SVG shapes

My code is successfully adding an svg background with js and rotating it using set interval. It works perfectly on Chrome, but not on any other browser. Any suggestions on how to make it work universally? let i = 0; setInterval(() => { document.b ...

javascriptcsssvgjquery-animate