Texture having border

I have an image using for texture like this:


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:


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.

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

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

Try transparent: false,

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

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

image

this still not working

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

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

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.


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:

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

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

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

here is my sample code ‘Glitch :・゚✧

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.

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");


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

3 Likes

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