Small detail in texture get blur

Questions
1

I have an image (include big detail, small detail and the text) using for texture like this:

design
design1680×1200 63.6 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.setSize(700, 700);
    renderer.setClearColor("#eee");

    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 positions = geometry.attributes.position;
        for (let i = 0; i < positions.count; i++) {
          const x = positions.getX(i);
          const y = positions.getY(i);
          const z = positions.getZ(i);
          if (side === "angled") {
            positions.setX(i, x + y / 20);
            positions.setY(i, y - x / 2.5 + Math.abs(x * x) * (1 / 10000));
            positions.setZ(i, Math.abs(x * x) * (1 / 20000));
          }
        }
        positions.needsUpdate = true;

        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:

Screen Shot 2023-09-08 at 16.29.47
Screen Shot 2023-09-08 at 16.29.471318×956 37.3 KB

as you can see, the big detail get more clear than small detail and the text is very blur.

I don’t know how to make it more clear especially the text.
Can anyone help me with this?
Thanks.

1 Like
2

Is it still blurry if you add these two lines where renderer is created:

renderer.setPixelRatio( window.devicePixelRatio );
renderer.domElement.style.imageRendering = 'pixelated';
2 Likes
3

That working, thank for helping.

1 Like