Three.js：在立方体的一个面上组合材质（使用多种材质）答案

【问题标题】：Three.js: Combine materials on a single face of cube (that uses multiple materials)Three.js：在立方体的一个面上组合材质（使用多种材质）
【发布时间】：2015-01-16 00:00:43
【问题描述】：

我创建了一个立方体（天空盒），它的每一面都使用了不同的材料。使用MeshFaceMaterial没有问题：

var imagePrefix = "images-nissan/pano_";
var imageDirections  = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
var imageSuffix = ".png";
var skyGeometry = new THREE.BoxGeometry(1, 1, 1);
var materialArray = [];
for (var i = 0; i < 6; i++) {
    materialArray.push(new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture(imagePrefix + imageDirections[i] + imageSuffix),
        side: THREE.BackSide
    }));
}

var skyMaterial = new THREE.MeshFaceMaterial(materialArray);
var skyBox = new THREE.Mesh(skyGeometry, skyMaterial);
skyBox.name = "interiorMesh";
scene.add(skyBox);

但是，现在我想在立方体的一个面上添加一种材质，并在立方体的这个面上组合材质。

所以基本上我会在立方体的 5 个面上使用一种材料，在立方体的 1 个面上使用 2 种材料 - 我想用另一个透明 png 覆盖那个“原始”纹理，这样它就只覆盖特定部分原始图像。两张图片的尺寸相同，只有 new 一张是部分透明的。甚至可以用 CubeGeometry 做吗？还是我需要用飞机来做？非常感谢任何帮助！

【问题讨论】：

您可以创建一个自定义的 GLSL 着色器，它结合了 2 种颜色 (col1.rgb + (col2.rgb * col1.a)) 或者您可以使用您的平面方法。请注意透明度，尽管它无法按预期工作。

标签： javascript 3d three.js skybox

【解决方案1】：

您肯定可以更改其中一张脸的材质。但是，您不能对一张脸使用两种材料。

我建议创建其他纹理作为前两者的组合，将其制成单独的材质，并在需要时将其分配给立方体的第六面。如果可能，请事先在您选择的图形编辑器中合并这些图像。如果您只能在运行时执行此操作，您将不得不使用画布来合并它们，或者按照@beiller 的建议使用着色器。

我不推荐透明平面，透明有时会非常棘手，并且渲染方式很奇怪。

这里讨论了类似的东西 - Multiple transparent textures on the same mesh face in Three.js

【讨论】：

谢谢，我确实是用画布完成的（在阅读您的答案之前）。看起来不错的解决方案，没有问题。