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

Question

I have a problem with rendering texture on a small plane. Let's say I generate a texture from html, no metter how, but I have an html rendered as Image, now I want to render it on a small plane (display) which hangs near the instrument in VR space. The instrument is really tiny in compare to other objects, but in the same time it is really close to the screen, so it looks not so small.

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

So when I render the html on this display I get a very bloored unreadable image. One of the ways is to increase the basic size of the element, but probabbly there is some LOD-like-way of solution. Can somebody help to solve this issue? Thanks!

Answer 1

I found that if I initially give a normal size to the object, than scale it to the small size it works fine for me without any textures blure.

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});