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获取映射的画布：

            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

感谢@ 2pha的帮助，因为他的建议引导我得到了正确的答案，事实证明，像素化效果是由画布的不同尺寸引起的。

例如主画布本身是1024x1024而文字＆amp;图片画布只有512x512像素，这意味着它必须被拉伸才能覆盖主画布的大小。

加载到CanvasTexture上的图像显示为像素化

1 个答案: