Texture having border

Questions
1

I have an image using for texture like this:

design
design840×600 18.3 KB

Here is my code:

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, 300 / 300, 0.1, 1000);
    camera.position.z = 456;
    const renderer = new THREE.WebGLRenderer({
      canvas: canvasRef.current,
      antialias: true,
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.domElement.style.imageRendering = "pixelated";
    renderer.setSize(700, 700);
    renderer.setClearColor("#fff");

    const designTextureLoader = new THREE.TextureLoader();
    designTextureLoader.load(
      canvas2D,
      function (texture) {
        texture.colorSpace = THREE.SRGBColorSpace;
        texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
        var material = new THREE.MeshBasicMaterial({
          map: texture,
          transparent: true,
        });
        const geometry = new THREE.PlaneGeometry(840, 600, 100, 100);
        const paperBag = new THREE.Mesh(geometry, material);
        scene.add(paperBag);
        paperBag.position.z = 6;
        paperBag.position.y = 2;
        paperBag.scale.x = 0.76;
        paperBag.scale.y = 0.76;
        paperBag.rotation.x = -(Math.PI / 180) * 1;
      },
      undefined,
      function (error) {
        console.error("An error occurred while loading the texture:", error);
      }
    );

    const render = () => {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    };
    render();

And this is result:

result
result695×695 13 KB

You can see that the texture look like having the border but the original image don’t.

I want to remove that border but don’t know how.
Can anyone help me with this?
Thanks.

2

after this line can you add:
texture.wrapS = texture.wrapT = THREE.RepeatWrapping?

It’s possible that the texture filtering is pulling data from outside the texture, and without a wrap mode set, that data may be black pixels. Changing the wrap modes to either RepeatWrapping or ClampToEdgeWrapping may fix it?

1 Like
3

I tried “texture.wrapS = texture.wrapT = THREE.RepeatWrapping” and “texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping” but that not working the result still have the border

result
result699×674 12.6 KB

4

Try transparent: false,

5

No can’t do that, because using png image for texture so need the transparent

6

Try this texture. Black transparent background of texture changed to white

444
444840×600 19.2 KB

image

7

this still not working

8

Works for me. No border. Maybe need to clean browser cache to load new image.

9

Any way to change the black transparent background of texture changed to white in three.js?

10

Simply yes. For better solution we can use in photoshop Filter “Flaming pear->Solidify A”
to fill transparent pixels not white but with color of our image.

image
image861×613 46.9 KB

Then add mask of image to make transparent again.
But photoshop have bug - totally transparent pixels became white. Here we need make mask more bright (not good) or use another program to save image with our mask.

Result:

image
image905×361 33.6 KB

11

I wrote php script and made good image without photoshop “bug”.

done
done840×600 80.8 KB

12

It not working with me, and also the texture image depend on user input

13

You should probably make a glitch or a codepen showing the issue.

Here’s a glitch you can “remix” and add your code to the bottom of “script.js” and then “share” us a link and we can see what you’re are describing…

1 Like
14

image
image2181×1151 370 KB

15

here is my sample code ‘Glitch :･ﾟ✧’

16

image
image748×195 15.1 KB

image
image778×220 15.2 KB

17

As I say the design image depend on the user input, so If can change black transparent to white just by JS or three.js then please share me your code on the Glitch, thanks.

18

I used this code and your original image. Not glitch site:

        var material = new THREE.MeshBasicMaterial({
          map: texture,
          transparent: true,
          //premultipliedAlpha:true
        });
        material.onBeforeCompile=function(){
        this.premultipliedAlpha=true;
        }

Left: renderer.setClearColor("#000");
Right: renderer.setClearColor("#fff");

image
image747×217 26.4 KB

I used three.js version 140.
Into glitch site it have white border i dont know why

3 Likes
19

Ok, I change version to 0.151.3 and it work well, from 0.151.3 to lasted it have white border like you said.
Thanks for helping me.

2 Likes