0

I have a png that i use as a texture for a PlaneGeometry but I would like to add a blue background also. I am using the canvas renderer if that will be relevant.

This is my code, the image works but the color does not :

var material2 = getTextureMaterial('img/ok.png');
var plane2 = new THREE.PlaneGeometry(100, 100);
meshImage = new THREE.Mesh(plane2, material2);
meshImage.position.set(1000, -40, 200);
meshImage.userData.name = 'image';
meshImage.rotateY(Math.PI / 2);

function getTextureMaterial(path) {
    var texture = new THREE.Texture(texture_placeholder);
    var material = new THREE.MeshBasicMaterial({
        color: new THREE.Color(0xff0000),
        map: texture,
        overdraw: 0.5,
        side: THREE.DoubleSide,
    });
    var image = new Image();
    image.onload = function() {
        texture.image = this;
        texture.needsUpdate = true;
    };
    image.src = path;
    return material;
}
gman
  • 83,286
  • 25
  • 191
  • 301
Madalinul
  • 75
  • 1
  • 8
  • Do you want to add a background color to your scene or to your plane? – leota Apr 26 '16 at 13:37
  • To my plane geometry – Madalinul Apr 26 '16 at 13:39
  • What are you getting with this code? Does the png have an alpha channel? – leota Apr 26 '16 at 13:40
  • Yes it has an alpha cannel. This is what it looks like http://i.imgur.com/k4hiax7.png – Madalinul Apr 26 '16 at 13:48
  • You'll probably need to build your own custom shader: http://stackoverflow.com/questions/16287547/multiple-transparent-textures-on-the-same-mesh-face-in-three-js – leota Apr 26 '16 at 13:58
  • Ok, thanks for your help. – Madalinul Apr 26 '16 at 14:06
  • hmm, I thought MeshBasicMaterial should support alpha on the map. If not, it would be very simple to write a custom shader for just map and color. [THIS](http://blog.2pha.com/experimenting-threejs-shaders-and-shadermaterial) may help you. – 2pha Apr 26 '16 at 14:38
  • As an alternative, there is a multiMaterial method in the sceneUtils class @ https://github.com/mrdoob/three.js/blob/master/src/extras/SceneUtils.js, although it appears to simply create multiple meshes and return a group, one mesh object per material. This may be a simpler solution for a plane or two, but less so if you plan on having many more faces. Personally I'd just add a second plane anyways so you can give it its own material, such as with animated water material under a ground map represented by a PNG material. – Radio Apr 26 '16 at 15:25

0 Answers0