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