Three.js material 禁用插值

Question

我有一个 64x64 像素的纹理，由白色和透明像素组成，应该用作叠加层。问题是纹理被拉伸并且渲染必须是像素完美的。但是当渲染纹理时，白色和透明像素之间的边缘被插值，但它们必须是锐利的边缘。如何禁用此特定 material 的插值？

Material定义：

this._groundOverlayMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    transparent: true
});

地图是使用canvas单独创建的，然后使用：

设置

this._groundOverlayMaterial.map = new THREE.TextureLoader().load(overlayCtx.canvas.toDataURL('image/png'));
this._groundOverlayMaterial.needsUpdate = true;

信息：网格是一个没有细分的简单平面

Answer 1

您可能希望将纹理的 Magnification & Minification filters 设置为“最近邻”，这样可以消除像素之间的插值，而是“捕捉”到最近的像素，类似于 Math.round() 到最近的完整像素整数。

// Create texture from canvas
const texture = new THREE.CanvasTexture(overlayCtx.canvas);
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;

// Use that texture in your material
this._groundOverlayMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    transparent: true,
    map: texture,
});

你可能只在放大纹理时需要它，不确定你是否需要缩小纹理。

Three.js material 禁用插值

Three.js material disable interpolation

three.js