如何在 Three.js 中正确地将 CanvasTexture 适配到网格上？

Question

我正在开发一个项目，涉及将 2D 画布纹理应用到 3D 模型的网格上（具体来说，将模仿 Windows 95 的画布投影到计算机模型的屏幕上）。我的目标是使该纹理具有交互性，这样我就可以像使用 Windows 95 一样导航模型的屏幕。

到目前为止我已按照以下步骤操作：

1. 将模型导入 Blender，将特定网格（屏幕）与模型的其余部分分开。
2. 将模型导出为 .glb 文件并将其加载到我的 JavaScript 文件中。
3. 找到我想要的网格（名为“pc_screen”）并应用纹理。

到目前为止，一切都运行良好 - 我可以看到我的画布显示在模型的屏幕上。

但是，我正在努力将纹理正确地安装到屏幕网格上。使用偏移和重复进行对齐对于手动微调来说非常具有挑战性，我觉得可能有更好的方法来处理这个问题。

代码

这是我正在使用的代码：

加载具有尺寸的纹理：

似乎我不必在参数上添加“尺寸”，但我尝试过......

const Wintexture = createWindows95Texture(84.9448561668396, 63.90901794154992);

将纹理应用到网格：

computerModel.traverse((child) => {
    if (child.isMesh && child.name === "pc_screen") {
        const material = new THREE.MeshBasicMaterial({ map: Wintexture });
        child.material = material;
    }
});

尝试通过偏移调整纹理并重复：

Wintexture.repeat.set(1, 1);
Wintexture.offset.set(1, 1);
Wintexture.needsUpdate = true;

创建画布纹理：

这是我开始创建画布纹理的方法：

export default function createWindows95Texture(width, height) {
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");
    
    // Drawing content on the canvas...

以及它是如何完成的：

 return new THREE.CanvasTexture(canvas);
}

What I've Tried

我尝试手动调整偏移和重复值，但很难做到正确。我正在寻找一种更准确或更自动化的方法来将画布纹理完美地贴合到屏幕网格上。

Three.js 中是否有推荐的方法来对齐特定网格上的纹理？或者我应该考虑某种数学计算来自动化拟合过程？

如有任何指导，我们将不胜感激！

Answer 1

导出之前，请确保您的网格在 Blender 中具有正确的 UV 映射。这使得 Three.js 中的纹理对齐更加平滑。另外，请将画布纹理尺寸与屏幕网格尺寸相匹配，以获得更好的贴合效果。调整纹理的中心和旋转可以帮助微调对齐方式。