CODEWITHSUNDEEP
javascriptthree.js
user1449456
user1449456

Reputation: 642

Bending text object in ThreeJS

There is this repo for this example, which is almost 2 years old, and therefore does not work with the recent releases of the threeJS.

I am having the following error and warnings.

error: THREE.Matrix3.getInverse no longer takes a Matrix4 argument.

warning: THREE.Matrix3.getInverse(): can't invert matrix, determinant is 0

Not sure if it is due to the error and warnings I am getting but the resulting bending is also not correct (screenshot).

I tried to change the bending axis but no luck.

How can I modify this libray to work with recent threeJS releases or is there any alternative way to bend the text as shown in the example of aforementioned repo?

Upvotes: 1

Views: 854

Answers (1)

Joat Mofa
Joat Mofa

Reputation: 81

There was a change in THREE.js but it is quite easy to adjust the BendModifier.js script. Just change the lines

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

and

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

to Matrix4 in both cases - so they will read:

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

and

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

Just tried it with three.min.81.js and it works fine.

Upvotes: 1

Related Questions