Question

我正在尝试将颜色和图像添加到Threejs Mesh画布上之后。据我所知，如果我使用相同的材料添加颜色和贴图，它们将融合在一起，并且没有办法停止它。因此，如果我有一张白色的图像和黄色的颜色，则该颜色会使该图像变成黄色：

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文档说它接受多种材料 https://threejs.org/docs/#api/en/objects/Mesh.material

我看到另一个可能发生的问题，如果我使它正常工作，则仅带有图像的材料将默认为白色，因此不会显示下面材料的颜色。

那么，如何在不融合网格物体的情况下设置它们的图像和颜色。添加两种材料对我来说似乎过于复杂，从长远来看可能很难管理？

更新因此，我的问题最终是我使用的纹理canvas texture。我需要将画布纹理中使用的画布的填充样式设置为不透明。像这样：

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

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

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;

希望这可以帮助某人。

Answer 1

在我尝试将网格材质设置为材质数组的那一刻，它变成空白，好像它不接受数组作为参数一样。

由于您的几何图形未定义任何groups data，因此可能会发生这种情况。这是使用多种材料的要求。

因此，如果我有白色图像和黄色，则该颜色会使图像着色为黄色

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

那么如何在不融合的情况下设置网格材料的图像和颜色。

如果要使用不同的材质渲染网格的不同部分，请为各个几何定义组数据并使用多种材质。否则，请考虑复制网格，然后将一种材料分配给原始材料，将第二种材料分配给副本。通过将副本添加到原始副本（mesh.add( copy )）中，您可以将两者保留在同一位置。

如何将两种材料添加到已经在画布上渲染的网格中

1 个答案: