CODEWITHSUNDEEP
javascriptthree.js
Duma - Stefano Gombi
Duma - Stefano Gombi

Reputation: 472

Reuse image in three.js textures

I'm trying to load with three.js the same image in a large number (~ 1000) of bidimensional shapes but with different offsets in every shape.

I've taken this demo from the official website and customized it into this other demo, with all my shapes and a random background texture.

The problem is that if I clone the texture once per shape the page eats a lot of RAM and it ends up crashing. You can see this in action by going in the javascript and changing the comments in the addShape function (you'll find the instructions in the code).

I've done some research and found some results, like this open issue or this older question where it's recommended to clone the texture; anyway nothing seems to work in my example.

Am I doing something wrong? It's changed something since these last posts about this problem?

Upvotes: 0

Views: 313

Answers (1)

hEins
hEins

Reputation: 31

Maybe I´m misunderstanding the problem, but why don´t you change the UV coordinates of the individual shapes to align the texture and use just one texture?

From documentation:

Geometry.faceVertexUvs

Array of face UV layers, used for mapping textures onto the geometry. Each UV layer is an array of UVs matching the order and number of vertices in faces.

To signal an update in this array, Geometry.uvsNeedUpdate needs to be set to true.

Upvotes: 1

Related Questions