javascript - 如何在 Three.js 中正确渲染小网格上的大纹理？

Question

我在小平面上渲染纹理时遇到问题。假设我从 html 生成纹理，无论如何，但我有一个渲染为图像的 html，现在我想将其渲染在悬卡在 VR 空间中仪器附近的小平面(显示器)上。与其他物体相比，该仪器确实很小，但同时它又非常靠近屏幕，所以看起来并不小。

const DISPLAY_TARGET_WIDTH = 0.2;
const display = new THREE.Mesh(
    new THREE.PlaneGeometry(DISPLAY_TARGET_WIDTH, 1),
    DEFAULT_DISPLAY_MATERIAL,
);

因此，当我在此显示器上渲染 html 时，我会得到一个非常模糊且不可读的图像。 其中一种方法是增加元素的基本尺寸，但可能有一些类似 LOD 的解决方案。有人可以帮助解决这个问题吗？谢谢!

Answer 1

我发现，如果我最初给对象指定一个正常大小，然后将其缩放到小尺寸，它对我来说效果很好，没有任何纹理模糊。

export const DISPLAY_TARGET_WIDTH = 2000;
const display = new THREE.Mesh(
    new THREE.PlaneGeometry(DISPLAY_TARGET_WIDTH, DISPLAY_TARGET_WIDTH),
    DEFAULT_DISPLAY_MATERIAL,
);
display.scale.setScalar(0.01);
const texture = new THREE.Texture(displayImage);
texture.anisotropy = 16;
texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.generateMipmaps = false;
texture.needsUpdate = true;

this.display.material = new THREE.MeshLambertMaterial({map: texture, side: THREE.DoubleSide});