javascript - Three.js:在立方体的单个面上组合 Material (使用多种 Material )

Question

我创建了一个立方体(天空盒)，它的每一面都使用不同的 Material 。使用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);

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

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

Answer 1

您肯定可以更改其中一张面的 Material 。但是，您不能为一个面使用两种 Material 。

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

我不推荐透明平面，透明有时会非常棘手并且以一种奇怪的方式呈现。

此处讨论了类似的内容 - Multiple transparent textures on the same mesh face in Three.js