Three.js材质禁用插值。

Question

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

材料定义：

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

使用画布单独创建地图，然后使用以下方式进行设置:

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

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

- Marcel Lorenz

Answer 1

你可能希望将纹理的放大和缩小过滤器设置为“最近邻居”，这会删除像素之间的插值，并且代替地“捕捉”到最接近的像素，类似于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,
});

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

- Marquizzo