How clamp edge wrapping a texture image?

Stormer_Z · August 1, 2022, 4:14pm

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

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

Here is the bad result:

Here is what I wanna:

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！

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

tfoller · August 2, 2022, 1:29am

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.

Chaser_Code · August 2, 2022, 5:05am

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

Stormer_Z · August 2, 2022, 9:51am

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

Decal will though the t-shirt modle.

Topic		Replies	Views
Wrong UV unwrap -decal -textures load flip(Photos are loaded upside down) Questions textures , uv-mapping , texture-loader , decals , texture , uvs , uv , decalgeometry	6	186	February 20, 2024
Texture wrapping Mode no repeat/no hold? Questions textures	2	694	October 6, 2022
Images on top of textures Questions textures	11	2894	January 23, 2021
Bind texture with no repeat (zero) Questions textures	4	793	May 8, 2021
Scaling only some part of texture Questions sprites , sprite-material , scaling , texture	2	126	January 7, 2024

How clamp edge wrapping a texture image?

Related Topics