Question

我创建了一个立方体（天空盒），每边使用不同的材质。使用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个材质 - 我想覆盖那个＆＃39; 原始＆＃39;纹理与另一个透明的png，所以它只涵盖原始图像的特定部分。两个图像都具有相同的尺寸，只有 new 一个是部分透明的。是否可以使用CubeGeometry？或者我需要用飞机做吗？任何帮助非常感谢！

Answer 1

您可以确定更改其中一张脸的素材。但是，您不能在一张脸上使用两种材质。

我建议创建额外的纹理作为前两个的组合，使其成为单独的材质，并在需要时将其指定给立方体的第六面。如果可以，请在您选择的图形编辑器中预先合并这些图像。如果你只能在运行时执行它，你将要么使用canvas来合并它们，或者按照@beiller的建议使用着色器。

我不推荐使用透明平面，有时透明度可能非常棘手并且以奇怪的方式渲染。

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

Three.js：在立方体的单个面上组合材料（使用多种材料）

1 个答案: