0

Is it possible to map multiple different textures to one face of a geometry in three.js?

I don't want to create multiple faces and assign materialIndexes since the number of faces I need for the geometry changes during runtime.

Here is my last unsuccessful attempt (three.js r.71):

//get some materials
var materials = [];
materials.push(loadTextures(1));
materials.push(loadTextures(2));
materials.push(loadTextures(3));
materials.push(loadTextures(4));
var faceMaterial = new THREE.MeshFaceMaterial(materials);

//create objects
var wireframeObj = new THREE.Mesh(geometry.clone(), new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 'red'
}));
var mainObj = new THREE.Mesh(geometry, faceMaterial);
scene.add(wireframeObj);
scene.add(mainObj);

camera.position.z = 100;
renderer.render(scene, camera);

function loadTextures(i) {
    var texture = new THREE.Texture();
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(2, 2);

    var image = new Image();
    image.onload = function () {
        texture.image = this;
        texture.needsUpdate = true;
    };
    image.src = 'images/crate' + i + '.gif';

    return new THREE.MeshBasicMaterial({ map: texture });
}

This produces the following: wrong result

while I want to see also crate2 to the right, crate3 above crate1 etc.

the_web
  • 406
  • 1
  • 4
  • 11
  • I'm not seeing why you cannot separate the face into 4 faces and draw a texture on each face. I don't think you can draw many textures on a single face as if it was several faces (nor should you be able to without several problems). – Spencer Wieczorek Sep 06 '15 at 22:30
  • @Spencer, the number of faces and their sizes changes depending on other factors. So, I need to handle this programmatically. Currently I am drawing the images on a canvas and using it as a face material, but there are performance issues. – the_web Sep 07 '15 at 06:37
  • Check this thread http://stackoverflow.com/questions/16287547/multiple-transparent-textures-on-the-same-mesh-face-in-three-js – Alexander Popov Sep 11 '15 at 16:35

0 Answers0