Javascript 如何向已在画布上渲染的网格添加两种材质

我试图添加一个颜色和一个图像到一个3JS网格后，它已经在画布上。据我所知，如果我使用相同的材质添加颜色和贴图，它们将混合在一起，没有办法阻止它。因此，如果我有一个白色图像和一个黄色图像，该颜色将使图像变为黄色：

let material = new THREE.MeshLambertMaterial({
               map: canvasTexture,
               color: 0xCECECE
               });

为了解决这个问题，我尝试向网格添加两种材质。一个有颜色，一个有图像

let material0 = new THREE.MeshLambertMaterial({
                color: 0xCECECE
                });

let material1 = new THREE.MeshLambertMaterial({
                map: canvasTexture
              });

var materials = [material0, material1];

mesh.material = materials;

当我尝试将网格材质设置为材质数组时，它会变为空白，好像它不接受数组作为参数一样。尽管threejs文档称它接受一系列材料

我看到的另一个问题可能会发生，如果我让它工作的材料只有一个图像将默认为白色，因此没有显示下面的材料的颜色

那么，如何设置网格材质的图像和颜色而不进行混合呢。添加两种材料对我来说似乎过于复杂，从长远来看可能更难管理

更新 所以我的问题是我使用的纹理是一个。我需要将画布纹理中使用的画布填充样式设置为不透明。比如：

ctx.fillStyle = "rgba(255, 255, 255, 0)";

然后我可以继续向网格添加阵列中的多个材质。使用画布纹理作为贴图的材质也必须设置为透明。我还必须将map.minfilter设置为3.LinearFilter。不知道为什么，但至少现在它起作用了：）

希望这能帮助别人

当我尝试将网格材质设置为材质数组时，它会变为空白，好像它不接受数组作为参数一样

这可能会发生，因为您的几何体没有定义任何。这是使用多种材料的要求

因此，如果我有一个白色的图像和一个黄色的颜色，颜色会把图像染成黄色

这是预期的行为。材质的颜色与漫反射纹理中的采样颜色值相乘。TBH，不同的默认行为是没有意义的

那么，如何设置网格材质的图像和颜色而不进行混合呢

如果要使用不同材质渲染网格的不同部分，请为各自的几何体定义组数据并使用多个材质。否则考虑复制网格，并将原材料和第二材料分配给副本。通过将副本添加到原始（

mesh.add（copy）

）中，可以将两者保持在同一位置

当我尝试将网格材质设置为材质数组时，它会变为空白，好像它不接受数组作为参数一样

这可能会发生，因为您的几何体没有定义任何。这是使用多种材料的要求

因此，如果我有一个白色的图像和一个黄色的颜色，颜色会把图像染成黄色

这是预期的行为。材质的颜色与漫反射纹理中的采样颜色值相乘。TBH，不同的默认行为是没有意义的

那么，如何设置网格材质的图像和颜色而不进行混合呢

---

如果要使用不同材质渲染网格的不同部分，请为各自的几何体定义组数据并使用多个材质。否则考虑复制网格，并将原材料和第二材料分配给副本。通过将副本添加到原始网格（

mesh.add（copy）

），可以将两者保持在同一位置。

我不明白为什么没有一个简单的属性来定义颜色和纹理的混合方式。当然，在许多用例中，这都是适用的。你的两个选择似乎对我有好处。组数据可能正是我想要的。我也不知道我可以在网格中添加网格？所以，点击一个按钮，我得到网格，复制它，改变原材料为颜色，复制为纹理，然后将复制添加到原材料？一旦我有机会尝试一下，如果其中任何一种选择对我有效，我会投票支持你的答案。谢谢，我不明白为什么没有一个简单的属性来定义颜色和纹理的混合方式。当然，在许多用例中，这都是适用的。你的两个选择似乎对我有好处。组数据可能正是我想要的。我也不知道我可以在网格中添加网格？所以，点击一个按钮，我得到网格，复制它，改变原材料为颜色，复制为纹理，然后将复制添加到原材料？一旦我有机会尝试一下，如果其中任何一种选择对我有效，我会投票支持你的答案。非常感谢。

let material0 = new THREE.MeshLambertMaterial({
    color: 0xf2f2f2
});

let material1 = new THREE.MeshLambertMaterial({
    map: canvasTexture,
    transparent: true
});
material1.map.minFilter = THREE.LinearFilter;

var materials = [material1, material0];
mesh.geometry.clearGroups();
mesh.geometry.addGroup( 0, 48, 0 ); 
mesh.geometry.addGroup( 0, 48, 1 ); 
mesh.material = materials;