Threejs adding 1080p textures is rendered blurry

  Kiến thức lập trình

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

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

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website