如何在 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});