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

Question

我在小平面上渲染纹理时遇到问题。假设我从html生成纹理，没有方法，但是我将html渲染为Image，现在我想在悬挂在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});