CanvasTextureに読み込まれた画像はピクセル化されて表示されます

Question

これについてはたくさんの質問がありましたが、いずれも問題を解決していません。オブジェクトは関係なく、私が使用しminFilterまたはmagFilterのピクセル化状態になる上に、私がアップロードし、任意の画像 - と私はそれらのすべてを使用しました：

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

はここでピクセル化画像を持つオブジェクトです：

そして、ここでどのように私は上の画像をロードしてるのスナップショットです：オブジェクト上に塗装することが、このキャンバスのデータが配列に追加された後

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

は - それはCanvasTextureがマッピングされたキャンバスを取得し、この時点で、次のとおりです。助けを@ 2phaへ

  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

おかげで彼の提案は、それがピクセル化効果をキャンバスの異なる寸法によって引き起こされたことが、判明し、正しい答えに私をリードして。

たとえば、メインキャンバス自体は1024x1024でしたが、テキスト&画像キャンバスは512x512ピクセルで、メインキャンバスのサイズをカバーするために伸ばさなければなりませんでした。