Three.js render white part of plain geometry

Question

I'm trying to turn this plainGeometry, into this (sort of mask).

This code works: (to sum-up, create two materials, divide the plane to segments and decide for each one which material is it with MeshFaceMaterial)

   Button.onClick(function () {

            var obj = editor.selected;
            var material = obj.material;
            var tex = material.map;
            var objHeight = obj.geometry.parameters.height;
            var objWidth = obj.geometry.parameters.width;
            var texHeight = tex.image.height;
            var texWidth = tex.image.width;

            var geometry = new THREE.PlaneGeometry(objWidth, objHeight, objWidth, objHeight);

            var facesNum = objHeight * objWidth * 2;
            var facesX = objWidth * 2;
            var facesInX = texWidth * 2;

            var materials = [];
            materials.push(material);
            materials.push(new THREE.MeshBasicMaterial({ }));

            for (var i = 0; i < facesNum; i++) {
                if ((i % facesX >= objWidth - texWidth) &&
                    (i % facesX <= (facesInX + objWidth - texWidth - 1)) &&
                    (i <= (texHeight * objWidth * 2) - 1)) {
                    geometry.faces[i].materialIndex = 0;
                }
                else {
                    geometry.faces[i].materialIndex = 1;
                }
            }

            obj.geometry = geometry;
            obj.material = new THREE.MeshFaceMaterial(materials);

            editor.signals.materialChanged.dispatch(obj);


        });

But I'm wondering if there is a simpler way to go. Any suggestions?

Answer 1

this did it, eventually:

var obj = editor.selected;
var tex = obj.material.map.;

var materials = [];
materials.push(new THREE.MeshBasicMaterial({ map: tex }));
materials.push(new THREE.MeshBasicMaterial({}));

var material = new THREE.MeshFaceMaterial(materials);

var objHeight = obj.geometry.parameters.height;
var objWidth = obj.geometry.parameters.width;
var texHeight = tex.image.height;
var texWidth = tex.image.width;

tex.repeat = new THREE.Vector2(3, 3);
tex.offset = new THREE.Vector2(0, 0);

var geometry = new THREE.PlaneGeometry(objWidth, objHeight, 3, 3);

var v = geometry.vertices;
var facesNum = geometry.faces.length;

v[1] = new THREE.Vector3(-texWidth / 2, objHeight / 2, 0);
v[2] = new THREE.Vector3(texWidth / 2, objHeight / 2, 0);
v[5] = new THREE.Vector3(-texWidth / 2, (objHeight / 2) - texHeight, 0);
v[6] = new THREE.Vector3(texWidth / 2, (objHeight / 2) - texHeight, 0);

v[9] = v[13];
v[10] = v[14];
v[4] = v[8] = v[12];
v[7] = v[11] = v[15];

for (var i = 0; i < facesNum; i++) {
    if (i !== 2 && i !== 3) geometry.faces[i].materialIndex = 1;
}

obj.material = material;
obj.geometry = geometry;

editor.signals.materialChanged.dispatch(obj);