Is It Possible To Use 2 Textures (one On Top Of The Other) As A Material Without Using Custom Shaders?

I'm learning three.js and I've done a few a examples on it and basic shaders (One being Codrop's 'the aviator' tutorial), but right now I'm stumped trying to create a simple cube w

Solution 1:

Dynamically draw the images on a canvas and set that canvas as the texture.

functiongetCanvasImage() {

  var canvas = document.createElement('canvas');
  canvas.width  = 512;
  canvas.height = 512;
  var context = canvas.getContext('2d');
  var texture = newTHREE.Texture(canvas) ;

  var imageObj = newImage();
  imageObj.src = "my_image1.png";
  imageObj.onload = function(){  
    context.drawImage(imageObj, 0, 0);
    texture.needsUpdate = true;
    var imgObj2 = newImage();
    imgObj2.src = "my_image2.png";
    imgObj2.onload = function(){
      context.drawImage(imgObj2, 0, 0);
      texture.needsUpdate = true;
    }
  };

  return texture;

}

material = newTHREE.MeshBasicMaterial({map:getCanvasImage()});

Here is a fiddle

The fiddle shows a background pattern, overlayed with a png with transparency.

Notice in the fiddle I am calling function for the image sources that return a dataURL. This is just to get around the cors issue.

EDIT: Having re read your question, I'm not exactly sure what you want. Specifically "2 transparent .png textures at the same time for each of the square's face". Do you mean a different image on each face? If so, then my answer will not help you. If you mean that you need the background color to be visible as in the answer WestLangly linked to, you could possibly paint the canvas background color before drawing the images on it.

Of course... Just adding a custom shader like WestLangley suggests is probably easier than fiddling around with canvas just to create a texture.

Solution 2:

Without shaders you could try something like this:

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;

The second material being transparent will force the other cube to draw after the first one. If these two happen immediately one after another, it could produce the desired effect.