0

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 with 2 textures at once.

I would like to use 2 transparent .png textures at the same time for each of the square's face. Is this possible without recurring to custom shaders? I already saw this answer, but I've had no success getting it to work correctly because of it's complexity and being rather new to shaders.

For context, my code is pretty much the same on this example, just a simple 3D cube with a texture, which I'm trying to have 2 different ones (on on top of the other)

3
  • 1
    No. See stackoverflow.com/a/13547817/1461008. Jun 16, 2016 at 18:18
  • 1
    Could combine the images in a canvas, then use that as the material texture. No?
    – 2pha
    Jun 17, 2016 at 10:17
  • @2pha I've never thought about that...could you write a working example of this as an answer? Jun 17, 2016 at 14:47

2 Answers 2

1

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

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()});

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.

0

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.

3
  • There will be lose precision problem, textures may starts blinking on largest render distance. I spend long time by solving this. At the final, i render object in another scene and use depthTest = false. But this not always usable.
    – Martin
    Jun 17, 2016 at 7:53
  • blinking? But yes, you can do renderer.render(sceneA, camera); renderer.render( sceneB , camera);
    – pailhead
    Jun 17, 2016 at 18:57
  • @Martin Do you mean blinking similarly to this? Or is it a different kind of defect?
    – Wilt
    Jun 19, 2016 at 10:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.