是否可以在不使用自定义着色器的情况下将2种纹理(一个在另一个顶部)用作材料

Question

我正在学习三个。尝试一次创建一个带有2个纹理的简单立方体。

我想同时使用2个透明的.png纹理。这是否可以在不经过自定义着色器的情况下进行？我已经看到了这个答案，但是由于它的复杂性并且对着色器来说是新手，我没有成功的工作正常工作。

对于上下文，在此示例上，我的代码几乎是相同的，只是一个带有纹理的简单3D立方体，我试图拥有2个不同的代码（在另一个顶部）

Answer 1

在画布上动态绘制图像并将画布设置为纹理。

function getCanvasImage() {
  var canvas = document.createElement('canvas');
  canvas.width  = 512;
  canvas.height = 512;
  var context = canvas.getContext('2d');
  var texture = new THREE.Texture(canvas) ;
  var imageObj = new Image();
  imageObj.src = "my_image1.png";
  imageObj.onload = function(){  
    context.drawImage(imageObj, 0, 0);
    texture.needsUpdate = true;
    var imgObj2 = new Image();
    imgObj2.src = "my_image2.png";
    imgObj2.onload = function(){
      context.drawImage(imgObj2, 0, 0);
      texture.needsUpdate = true;
    }
  };
  return texture;
}
material = new THREE.MeshBasicMaterial({map:getCanvasImage()});

这是小提琴

小提琴显示了一个背景模式，并用透明度覆盖了PNG。

在小提琴中通知我正在调用返回数据图的图像源的功能。这只是为了解决CORS问题。

编辑：
在阅读您的问题后，我不确定您想要什么。特别是"同时为每个正方形的脸部同时透明的.png纹理"。您的意思是每张脸上有不同的图像吗？如果是这样，那么我的答案就不会帮助您。
如果您的意思是需要像Westlangly链接的答案一样可见背景颜色，则可能在绘制图像之前绘制帆布背景颜色。

当然...仅添加像Westlangley这样的自定义着色器，暗示可能比摆弄帆布来创建纹理要容易。

Answer 2

没有着色器，您可以尝试这样的东西：

var myMaterialA = new THREE.MeshBasicMaterial({map:myTextureA, depthWrite:false});
var myMeshA = new THREE.Mesh( new THREE.BoxGeometry(1,1,1) , myMaterialA );
var myMaterialB = new THREE.MeshBasicMaterial({map:myTextureB,transparent:true});
var myMeshB = myMeshA.clone();
var myMeshB.material = myMaterialB;

第二种透明的材料将迫使另一个立方体在第一个立方体绘制。如果这两个接一个地立即发生，它可能会产生所需的效果。