Question

我尝试创建一个用户可以通过鼠标旋转使用Three.js和webgl的对象。当屏幕具有全高清分辨率（1960x1080）时，显示效果很好，但是当用户屏幕的分辨率约为1366x768时，对象丑陋（模糊）。最值得注意的是图像上的文字。

图像原本的分辨率为1024x748，场景的大小约为530x270。

模糊-https://ibb.co/tzCkq6W（在某些情况下，模糊腐败的影响更大）

我通过下一个代码将模型连接到场景

// ...
scene.add({
    genotype: VOLUMETRIC_OBJECT,
    phenotype: MODELLED_MESH,
    data: {
      model: 'assets/FBX 2013/model.FBX',
      position: {
        x: 0,
        y: isMobile ? 0.05 : 0.375,
        z: 0,
      },
      scale: isMobile ? {
        x: 70e-3,
        y: 70e-3,
        z: 70e-3,
      } : {
        x: 75e-3,
        y: 75e-3,
        z: 75e-3,
      },
      name: 'model',
      material: {
        hb_03_label1Model: {
          map: 'assets/mm1.jpg',
          alphaMap: 'assets/mam1.jpg',
          color: 0xffffff,
          specular: new Color(0xffffff),
          shininess: 5,
          transparent: true,
          opacity: 1,
          needsUpdate: true,
        },
        body_hb_03Model: {
          normalMap: 'assets/mnm2.jpg',
          color: 0xaaaaaa,
          specular: new Color(0xFFFFFF),
          opacity: 0.35,
          shininess: 100,
          transparent: true,
          needsUpdate: true,
          normalScale: {
            x: 1,
            y: 1,
          },
        },
        hb_03_leqidoModel: {
          type: MATERIAL__SHADER,
          map: 'assets/mm3.jpg',
          thicknessMap: 'assets/mtm3.jpg',
          specularMap: 'assets/msm3.jpg',
          normalMap: 'assets/mnm3.jpg',
          repeat: [10, 10],
          color: 0xffffff,
          refractionRatio: 0.985,
          reflectivity: 0.15,
          diffuse: new Vector3(1, 0.3, 0.3),
          thicknessColor: new Vector3(0.11, 0.11, 0.11),
          needsUpdate: true,
          uniformsNeedUpdate: true,
        },
        hb_03_cappaModel: {
          color: 0x00AD16,
          needsUpdate: true,
        },
      },
    },
  },
  (model) => {
    // ...
  },
)

更新1：在我将mag和min滤镜更改为Linear的情况下，我的清晰度很高，并且文字也不可读。我认为，为了获得最佳结果，我需要使用由我自己生成的mipmap的mag过滤器用作Linear，将min过滤器用作LinearMipMapLinearFilter。但是，目前，生成对我来说如此强大的自定义mipmap。我确实增加了anisotropy的纹理，并且文本可以接受显示

在某些屏幕分辨率下，进入three.js场景的图像变得模糊

0 个答案: