如何为上传至Model Viewer的纹理设置NEAREST纹理过滤？

解决方案 #

问题核心是动态创建的新纹理默认采用线性过滤，而非NEAREST。CSS的image-rendering仅作用于DOM层面的图像渲染，无法影响model-viewer内部的WebGL纹理；模型原有纹理的过滤规则是预定义在GLB文件中的，不会自动继承给新上传的纹理。

只需在创建纹理时显式指定过滤参数即可解决：

修改后的代码

JavaScript

document.getElementById("urlA").addEventListener("change", function() {
  const file = this.files[0];
  const viewer = document.getElementById("modelA");

  if (!file) return;

  const reader = new FileReader();
  reader.addEventListener('load', async function() {
    // 创建纹理时指定NEAREST过滤模式
    const texture = await viewer.createTexture(reader.result, {
      magFilter: 'NEAREST',
      minFilter: 'NEAREST'
    });
    viewer.model.materials[0].pbrMetallicRoughness.baseColorTexture.setTexture(texture);
  });
  reader.readAsDataURL(file);
})

说明

• magFilter：控制纹理放大时的采样方式，设为NEAREST会取最接近的像素，生成硬边缘的像素化效果。
• minFilter：控制纹理缩小时的采样方式，同样设为NEAREST可保证缩放全程保持像素化风格。
• 原有CSS、HTML代码无需修改，保持原样即可。

内容的提问来源于stack exchange，提问作者PabloMCProjects