How clamp edge wrapping a texture image?

Questions
1

Hi~ I’m setting a texture to my model.

texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;

Here is the bad result:

20220801235804
20220801235804676×675 26.7 KB

Here is what I wanna:

20220802000358
20220802000358608×655 19.4 KB

Document:
ClampToEdgeWrapping is the default. The last pixel of the texture stretches to the edge of the mesh.

I have to add a transparent border to the texture image in Photoshop.
This is too cumbersome！

20220802000403
20220802000403661×625 26.1 KB

Is there have some way to finish this with js code in runtime? Thank you~!

2

You can draw the image in the middle of a 2d canvas that is 2 pixels wider and longer than the image, this way you will get a transparent border around. Then you create a texture for THREE from the canvas.

1 Like
3

Second solution is using decal
https://threejs.org/examples/?q=decal#webgl_decals

1 Like
4

Thank you. I’m already tried decal. Still have other issue. :joy:

Decal will though the t-shirt modle.