Bild geladen auf CanvasTexture erscheint pixelig

Question

Es gab eine Menge Fragen um diese, aber keine von denen haben mein Problem behoben. Jedes Bild, das ich auf das Objekt laden wird verpixelt unabhängig von der minFilter oder magFilter, die ich verwenden - und ich habe sie alle verwendet:

THREE.NearestFilter 
THREE.NearestMipMapNearestFilter 
THREE.NearestMipMapLinearFilter 
THREE.LinearFilter 
THREE.LinearMipMapNearestFilter 
THREE.LinearMipMapLinearFilter 

Hier ist das Objekt mit einem verpixelten Bild:

Und hier ist eine Momentaufnahme, wie ich das Bild bin Laden auf:

 // Build a canvas object and add the image to it 
     var imageCanvas = this.getCanvas(imageLayer.guid, 'image'); 
     var imageLoader = new THREE.ImageLoader(); 

     imageLoader.load(imageUrl, img => { 
      // this.drawImage(img, gr, imageCanvas.canvas, imageCanvas.ctx); 
      var canvas = imageCanvas.canvas; 
      var ctx = imageCanvas.ctx; 

      canvas.width = 1024; 
      canvas.height = 1024; 

      var imgAspectRatioAdjustedWidth, imgAspectRatioAdjustedHeight; 
      var pushDownValueOnDy = 0; 

      var grWidth = canvas.width/1.618; 
      if(img.width > img.height) { 
       grWidth = canvas.width - grWidth; 
      } 
      var subtractFromDx = (canvas.width - grWidth)/2; 

      var grHeight = canvas.height/1.618; 
      if(img.height > img.height) { 
       grHeight = canvas.height - grHeight; 
      } 
      var subtractFromDy = (canvas.height - grHeight)/2; 

      var dx = (canvas.width/2); 
      dx -= subtractFromDx; 

      var dy = (canvas.height/2); 
      dy -= (subtractFromDy + pushDownValueOnDy); 

      imgAspectRatioAdjustedWidth = (canvas.width - grWidth) + 50; 
      imgAspectRatioAdjustedHeight = (canvas.height - grHeight) + 50; 

      ctx.globalAlpha = 0.5; 
      ctx.fillStyle = 'blue;' 
      ctx.fillRect(0, 0, canvas.width, canvas.height); 
      ctx.globalAlpha = 1.0; 
      ctx.drawImage(img, dx, dy, imgAspectRatioAdjustedWidth, imgAspectRatioAdjustedHeight); 
     }); 

dies Nachdem die Leinwand Daten zu einem Array hinzugefügt auf das Objekt gemalt werden - es ist an dieser Stelle, dass die CanvasTexture die abgebildeten Leinwand bekommt:

  var canvasTexture = new THREE.CanvasTexture(mainCanvas.canvas); 
      canvasTexture.magFilter = THREE.LinearFilter; 
      canvasTexture.minFilter = THREE.LinearMipMapLinearFilter; 

      // Flip the canvas 
      if(this.currentSide === 'front' || this.currentSide === 'back'){ 
       canvasTexture.wrapS = THREE.RepeatWrapping; 
       canvasTexture.repeat.x = -1; 
      } 
      canvasTexture.needsUpdate = true; 

      // { ...overdraw: true... } seems to allow the other sides to be transparent so we can see inside 
      var material = new THREE.MeshBasicMaterial({map: canvasTexture, side: THREE.FrontSide, transparent: false}); 

      for(var i = 0; i < this.layers[this.currentSide].length; i++) { 
       mainCanvas.ctx.drawImage(this.layers[this.currentSide][i].canvas, 0, 0, this.canvasWidth, this.canvasHeight); 
      } 

Answer 1

Dank @ 2pha für die Hilfe als seine Vorschläge führen mich in die richtige Antwort und es stellt sich heraus, dass die verpixelten Wirkung von unterschiedlichen Abmessungen der Leinwände verursacht wurde.

Zum Beispiel war das Haupt-Canvas selbst 1024x1024, während der Text & Bild-Canvases nur 512x512 Pixel waren, was bedeutet, dass es gestreckt werden müsste, um die Größe des Haupt-Canvas abzudecken.