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

【问题标题】：How do I properly render a big texture on a small mesh in Three.js?如何在 Three.js 中的小网格上正确渲染大纹理？
【发布时间】：2020-03-28 13:52:11
【问题描述】：

我在小平面上渲染纹理时遇到问题。假设我从 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 的解决方案。有人可以帮助解决这个问题吗？谢谢！

【问题讨论】：

标签： javascript three.js 3d textures virtual-reality

【解决方案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});

【讨论】：

这真的很奇怪，你确定这是你做的唯一修改吗？