javascript - Three.js texture for mesh with custom geometry -

javascript - Three.js texture for mesh with custom geometry -

i trying create house geometry , attach different textures faces of geometry. using r55. problem faces material created texture don't appear. faces simple color material appear. if replace material generated rooftexture simple color material, faces using material appear correctly well.

here relevant part of code:

var geom = new three.geometry(); // load roof texture var rooftexture = new three.imageutils.loadtexture('gfx/textures/roof.jpg'); // allow roof texture repeat rooftexture.wraps = rooftexture.wrapt = three.repeatwrapping; rooftexture.repeat.set(10, 10); // materials var materialarray = []; materialarray.push(new three.meshlambertmaterial({color: 0xd3e3f0 })); materialarray.push(new three.meshlambertmaterial({map: rooftexture})); // base of operations edges var edge0 = new three.vector2(obj.ridgelength/2, -obj.buildingdepth/2); var edge1 = new three.vector2(obj.ridgelength/2, obj.buildingdepth/2); var edge2 = new three.vector2(-obj.ridgelength/2, obj.buildingdepth/2); var edge3 = new three.vector2(-obj.ridgelength/2, -obj.buildingdepth/2); // floor geom.vertices.push(new three.vector3(edge0.x, -1, edge0.y)); geom.vertices.push(new three.vector3(edge1.x, -1, edge1.y)); geom.vertices.push(new three.vector3(edge2.x, -1, edge2.y)); geom.vertices.push(new three.vector3(edge3.x, -1, edge3.y)); // eave geom.vertices.push(new three.vector3(edge0.x, obj.eaveheight, edge0.y)); geom.vertices.push(new three.vector3(edge1.x, obj.eaveheight, edge1.y)); geom.vertices.push(new three.vector3(edge2.x, obj.eaveheight, edge2.y)); geom.vertices.push(new three.vector3(edge3.x, obj.eaveheight, edge3.y)); // ridge geom.vertices.push(new three.vector3(obj.ridgelength/2, obj.ridgeheight, 0)); geom.vertices.push(new three.vector3(-obj.ridgelength/2, obj.ridgeheight, 0)); // ground geom.faces.push( new three.face4(0, 0, 0, 0) ); // front end geom.faces.push( new three.face4(0, 3, 7, 4) ); // left side geom.faces.push( new three.face4(0, 4, 5, 1) ); // geom.faces.push( new three.face4(1, 5, 6, 2) ); // right side geom.faces.push( new three.face4(2, 6, 7, 3) ); // left triangle geom.faces.push( new three.face3(4, 8, 5)); // right triangle geom.faces.push( new three.face3(6, 9, 7)); // front end roof geom.faces.push( new three.face4(7, 9, 8, 4) ); // roof geom.faces.push( new three.face4(5, 8, 9, 6) ); // assign materials faces geom.faces[0].materialindex = 0; geom.faces[1].materialindex = 0; geom.faces[2].materialindex = 0; geom.faces[3].materialindex = 0; geom.faces[4].materialindex = 0; geom.faces[5].materialindex = 0; geom.faces[6].materialindex = 0; geom.faces[7].materialindex = 1; geom.faces[8].materialindex = 1; geom.computefacenormals(); obj.house = new three.mesh( geom, new three.meshfacematerial(materialarray) ); obj.house.doublesided = true; obj.house.castshadow = true; obj.sun.shadowdarkness = 1.0; obj.scene.add(obj.house);

what doing wrong?

you missing uv coordinates on geometry. uv coords go 0 1 since creating geometry can assign @ lower left corner uvs (0.0, 0.0) on lower right (1.0, 0.0), top left (0.0, 1.0) , top right (1.0, 1.0). can @ planegeometry.js file see how uvs assigned.

javascript three.js textures