在 glTF 中模拟单独的 alpha 贴图

Question

我有一个现有的 3D 应用程序，它是在 ThreeJS r92 时代开发的，它使用单独的 alpha 贴图来模拟木板上的孔洞。这允许在所有模型中重复使用高质量的木纹纹理，同时使用易于压缩的黑白图像在木板上创建 'holes'。

既然我已经开始将项目迁移到当前的 glTF 格式，我发现现在必须合并基色和 alpha 贴图。我的项目的结果是现在 130 多个木板中的每一个都需要自己的“木纹 + alpha”纹理，而不是能够共享一个木纹纹理。

从我所有的研究来看，使用 glTF 似乎没有明显的选择来解决这种情况。我现在的问题是 - 有谁知道 ANY 使用 glTF 的解决方法允许我要将基色纹理与 alpha 贴图纹理分开？

遗憾的是，目前最好的方法似乎是避免使用 glTF 并重新使用 ObjectLoader，这很痛苦，因为 glTF 的二进制对象是一个巨大的优势。

Answer 1

您可以导出只有基色的 GLTF。导入 Three.js 后，您可以手动将 black/white 纹理指定为 material's .alphaMap property。

// Fetch texture
const texLoader = new THREE.TextureLoader();
const alphaTexture = texLoader.load("path/to/alphaTexture");

gltfLoader.load("path/to/model", function(gltf){
    // Find the mesh you want to assign an alphaMap to
    const myMesh = gltf.getObjectByName("meshName");

    // Now just bind your texture to the alphaMap property
    myMesh.material.alphaMap = alphaTexture;
    myMesh.material.transparent = true;
});

文档说明 only the green channel is used 所以它不必是黑白的。

在 glTF 中模拟单独的 alpha 贴图

simulate separate alpha map in glTF

three.js

gltf