使用Three.js加载.gltf模型出现画质模糊、像素化问题求助

问题描述 #

加载GLTF模型成功，但模型纹理呈现严重像素化状态，预期纹理清晰平滑，实际显示有明显锯齿和模糊感。

核心问题分析 #

导致画质低下的主要原因有两点：

• 使用MeshBasicMaterial：该材质为无光照基础材质，不支持mipmapping（多级渐远纹理），当模型与相机存在距离时，纹理无法平滑过渡，直接出现像素化。
• 纹理未配置过滤模式：默认纹理过滤采用THREE.NearestFilter，这种模式会直接取最近的纹理像素，缩放时产生强烈锯齿感。

另外，代码中通过scene.children[3].children[1].children[0]获取Mesh的方式极度依赖场景元素顺序，一旦场景结构变化就会失效，属于不稳定写法。

具体修复步骤 #

1. 替换为支持PBR光照的材质

将MeshBasicMaterial替换为MeshStandardMaterial，该材质支持PBR光照系统，默认启用mipmap，能大幅提升纹理显示质量：

// 替换原有的MeshBasicMaterial
const material = new THREE.MeshStandardMaterial({ 
  map: texture,
  side: THREE.DoubleSide // 若模型存在单面渲染问题可添加
});

2. 配置纹理的过滤与mipmap参数

加载纹理时显式设置过滤模式，确保纹理缩放时平滑过渡：

var texture = textureLoader.load(`public/${texturename}`, (loadedTexture) => {
  loadedTexture.generateMipmaps = true; // 显式启用mipmap（默认开启，显式设置更稳妥）
  loadedTexture.minFilter = THREE.LinearMipmapLinearFilter; // 缩小时使用mipmap线性过滤
  loadedTexture.magFilter = THREE.LinearFilter; // 放大时线性过滤
});

// 保留你的纹理翻转设置
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = -1;

3. 优化Mesh的获取方式

避免依赖场景子元素索引，直接从GLTF加载结果中安全查找目标Mesh：

loader.load(
  'Bottle.gltf',
  function (gltf) {
      scene.add(gltf.scene);
      
      // 遍历GLTF场景查找Mesh
      let targetMesh = null;
      gltf.scene.traverse((child) => {
        if (child.isMesh) {
          // 可根据实际情况添加判断条件（如Mesh名称、几何类型）
          targetMesh = child;
        }
      });

      if (!targetMesh) return; // 未找到则终止后续操作
      
      // 后续纹理、材质设置代码...
  },
  // 进度回调
  function (xhr) {
    console.log(`${(xhr.loaded / xhr.total * 100).toFixed(2)}% loaded`);
  },
  // 错误回调
  function (error) {
    console.error('模型加载出错:', error);
  }
);

4. 修复Renderer的重复配置问题

代码中重复调用renderer.setSize(500, 500)且重复绑定canvas，可能导致画布尺寸异常，保留一次配置即可：

// 保留这段初始化代码，移除后面重复的setSize和append操作
const canvas = document.getElementById('my-canvas');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(500, 500);

完整修复后的核心代码片段 #

loader.load(
  'Bottle.gltf',
  function (gltf) {
      scene.add(gltf.scene);
      
      // 安全获取目标Mesh
      let targetMesh = null;
      gltf.scene.traverse((child) => {
        if (child.isMesh) {
          targetMesh = child;
        }
      });

      if (!targetMesh) return;

      const textureLoader = new THREE.TextureLoader();
      const textureName = texturename || "copy1.png";
      const texture = textureLoader.load(`public/${textureName}`, (loadedTex) => {
        loadedTex.generateMipmaps = true;
        loadedTex.minFilter = THREE.LinearMipmapLinearFilter;
        loadedTex.magFilter = THREE.LinearFilter;
      });
      
      texture.wrapS = THREE.RepeatWrapping;
      texture.repeat.x = -1;

      const material = new THREE.MeshStandardMaterial({ map: texture });
      targetMesh.material = material;
    },
    function (xhr) {
      console.log(`${(xhr.loaded / xhr.total * 100).toFixed(2)}% loaded`);
    },
    function (error) {
      console.error('模型加载出错:', error);
    }
);

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