Texture looks disorted, when position attributes are changed

Questions
,
1

The box is twisted using some simple math, to look like in the image. The problem is that the texture on the divisions looks distorted, like with some saw cuts.
I’m just changing points xz positions:

cube.geometry.attributes.position.array[cur_id * 3 + 0] = nx;
cube.geometry.attributes.position.array[cur_id * 3 + 2] = nz;
cube.geometry.attributes.position.needsUpdate = true;

( The texture is visible on this image left box, left face )

threejs_q1
threejs_q1743×327 35 KB

[edit]
It’s more visible what’s happening with less segments. It looks like the problem is happening because the mesh is made from many triangles. If it would behave like polygons with 4 vertex, I think it would work good.

threejs_q2
threejs_q2745×351 38.9 KB

[edit]
codepen example - https://codepen.io/wyy2/pen/vEOBYEm?editors=0011

2

Try this. If this not helped then can u create codepen, jsfiddle
cube.geometry.computeVertexNormals();

3

Probably related:

4

(post deleted by author)

5

Here’s codepen example - https://codepen.io/wyy2/pen/vEOBYEm?editors=0011
computeVertexNormals(); didn’t help.

6

I gues that might be it… I hoped for one line code to fix this issue^^

7

It looks like the perspective texture issue, which manifests itself whenever a texture is mapped on trapezoid, or on a twisted quadrilateral. The explanation is that internally, mapping uses affine transformation, but for cases like yours you need perspective transformation.

Try with a cube with more divisions along X and Z, not only Y, as it is now. This will reduce the texture tearing to acceptable level. Here is a demo (I rewrote the code for twisting, but the rest is your code):

https://codepen.io/boytchev/pen/raVBaMm?editors=0010

image

3 Likes
8

Great idea, and your code looks very tasty! Thank you :heart:

1 Like