CODEWITHSUNDEEP
javascriptthree.jstextures
user2044550
user2044550

Reputation: 21

Three.js texture for mesh with custom geometry

I am trying to create a house geometry and attach different textures to the faces of the geometry. I am using r55. The problem is that faces with material created from a texture just don't appear. Faces with a simple color material do however appear. If I replace the material generated from my roofTexture with a simple color material, the faces using that material do appear correctly as well.

Here is the relevant part of my code:

var geom = new THREE.Geometry();

// Load the roof texture
var roofTexture = new THREE.ImageUtils.loadTexture('gfx/textures/roof.jpg');

// Let the roof texture repeat itself
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 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
geom.faces.push( new THREE.Face4(0, 3, 7, 4) );

// Left side
geom.faces.push( new THREE.Face4(0, 4, 5, 1) );

// Back
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 roof
geom.faces.push( new THREE.Face4(7, 9, 8, 4) );

// Back roof
geom.faces.push( new THREE.Face4(5, 8, 9, 6) );

// Assign materials to the 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 am I doing wrong?

Upvotes: 2

Views: 2982

Answers (1)

gaitat
gaitat

Reputation: 12642

You are missing UV coordinates on your geometry. UV coords go from 0 to 1 so since you are creating the geometry yourself you can assign at your lower left corner UVs (0.0, 0.0) on your lower right (1.0, 0.0), top left (0.0, 1.0) and top right (1.0, 1.0). You can look at the PlaneGeometry.js file to see how UVs are assigned.

Upvotes: 2

Related Questions