Threejs adding 1080p textures is rendered blurry

Question

I am trying to render a sphere with a texture wrapped on it, i am using a png texture with 1920px1080p resolution but the resulted texture is always very blurry,

here is my sample code :

      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
      camera.position.set(0, 0, 20);
      var renderer = new THREE.WebGLRenderer({
        antialias: true,
      });
      var canvas = renderer.domElement;
      this.$refs.threeCanvas.appendChild(canvas);
      renderer.setSize(104, 104);

      // Load textures
      var textureLoader = new THREE.TextureLoader();
      var wrappingTexture = textureLoader.load(this.texture, () => {
        // Create the main sphere with the wrapping texture
        wrappingTexture.magFilter = THREE.LinearFilter; // <-- i tried adding these mag and min Filters but to no result
        wrappingTexture.minFilter = THREE.LinearMipMapLinearFilter;
        var sphereGeometry = new THREE.SphereGeometry(10, 256, 256);
        var wrappingMaterial = new THREE.MeshBasicMaterial({
          map: wrappingTexture,
          transparent: true, // Make the material transparent
          opacity: 0.5, // Set opacity for see-through effect
        });
        var sphere = new THREE.Mesh(sphereGeometry, wrappingMaterial);
        scene.add(sphere);
      })

Should i try a different texture ? Like SVG and with lower dimensions ?

Answer 1

renderer.setSize(104, 104); you are setting the resolution of the renderer too low.

try something like:

var canvas = renderer.domElement;
renderer.setSize(this.$refs.threeCanvas.offsetWidth, this.$refs.threeCanvas.offsetHeight);
this.$refs.threeCanvas.appendChild(canvas);

Maybe add renderer.setPixelRatio(2); if needed too as Lukaz said.