Texture get blur

Questions
1

I have an image using for texture like this

design
design2240×920 55 KB

Here is my code:

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(65, 300 / 300, 0.1, 1000);
    camera.position.z = 450;
    const renderer = new THREE.WebGLRenderer({
      canvas: canvasRef.current,
      antialias: true,
    });
    renderer.setSize(490, 490);
    renderer.setClearColor("#eee");

    // light
    scene.add(new THREE.AmbientLight(0xbbbbbb));
    const spotLight = new THREE.SpotLight(0xeeeeee, 1);
    spotLight.position.set(+200, 200, 20);
    scene.add(spotLight);
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(-300, 200, 50);
    scene.add(light);

    const designTextureLoader = new THREE.TextureLoader();
    designTextureLoader.load(
     /texture dara url/,
      function (texture) {
        texture.colorSpace = THREE.SRGBColorSpace;
        texture.format = THREE.RGBAFormat;
        var material = new THREE.MeshStandardMaterial({
          map: texture,
          transparent: true,
        });
        const geometry = new THREE.CylinderGeometry(180, 180, 420, 50, 1, true);
        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);
          positions.setY(i, y + Math.abs(z * z) * (1 / 2500));
          positions.setX(i, -Math.abs(z * z) * (1 / 1000));
        }
        positions.needsUpdate = true;

        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        mesh.position.y = -40;
        mesh.position.z = 40;
        mesh.scale.x = 0.7;
        mesh.scale.y = 0.7;
        mesh.rotation.y = -(Math.PI / 180) * 90;
        mesh.scale.z = 0.7;
      },
      undefined,
      function (error) {
        console.error("An error occurred while loading the texture:", error);
      }
    );

    const controls = new OrbitControls(camera, renderer.domElement);
    // Render the scene
    const render = () => {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    };
    render();

And this is the result

result
result984×986 15.4 KB

You can see that the texture getting blur. I don’t know why and how to fix it?
Can anyone help me with this?
Thanks.

1 Like
2

Try it with anisotropic filtering. Configure your texture like so:

texture.colorSpace = THREE.SRGBColorSpace;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

BTW: There is no need for the line texture.format = THREE.RGBAFormat;. Textures use the RGBA format by default in recent three.js versions.

2 Likes
3

It work perfectly, thank for helping.