Why is my mesh not being fully textured?

Question

I'm not entirely sure what the issue is here, and any help would be greatly appreciated. I am creating a building in Three.js, and am starting to texture the model. The base of the model (meaning, the simple building shape, without trim and gutters) is created using the ThreeCSG library, combining a few hand-coded geometries via THREE.Geometry (essentially a box for the building and a triangle for the roof pitch).

When I apply a repeating texture to the model, the roof pitch doesn't get textured, though it receives any colors and shadow/lighting settings that are applied. I have no idea what the deal is here. If I swap out the hand-drawn triangle roof pitch geometry for a regular THREE.BoxGeometry, it is textured correctly.

Does THREE.Geometry not allow textures? Do I need to do some special UV work for applying textures to shapes like that? I'm not very well versed in texture mapping, so any help would be appreciated on that.

Below you can see a wireframe mesh placed over the building mesh, showing the faces. Any ideas on why the top face of the building isn't being textured like the lower faces, but the color is being applied?

Here's the code I am using for creating the roof pitch geometry (CoffeeScript),

# Create roofline
geometry = new THREE.Geometry()
geometry.vertices.push new THREE.Vector3(-size.x / 2, 0, -size.z / 2)
geometry.vertices.push new THREE.Vector3(0, pitch, -size.z / 2)
geometry.vertices.push new THREE.Vector3(size.x / 2, 0, -size.z / 2)
geometry.vertices.push new THREE.Vector3(-size.x / 2, 0, size.z / 2)
geometry.vertices.push new THREE.Vector3(0, pitch, size.z / 2)
geometry.vertices.push new THREE.Vector3(size.x / 2, 0, size.z / 2)
geometry.faces.push new THREE.Face3(0, 1, 2)
geometry.faces.push new THREE.Face3(5, 4, 3)
geometry.faces.push new THREE.Face3(0, 3, 4)
geometry.faces.push new THREE.Face3(4, 1, 0)
geometry.faces.push new THREE.Face3(5, 2, 1)
geometry.faces.push new THREE.Face3(4, 5, 1)
geometry.faces.push new THREE.Face3(0, 2, 3)
geometry.faces.push new THREE.Face3(3, 2, 5)
geometry.computeFaceNormals()

I'm then merging the mesh created with that with a THREE.BoxGeometry, creating the final CSG mesh that you see above. Am I missing a step here?

ezekg ezekg · Accepted Answer · 2016-02-01T21:45:52

Ended up being because I wasn't defining any UV's for the custom geometry (while Three.js automatically defines them for say, THREE.BoxGeometry). After defining 2 UV's for the front and back faces of the roof, the textures are applied correctly.

# Create roofline
geometry = new THREE.Geometry()
geometry.vertices.push new THREE.Vector3(-size.x / 2, 0, -size.z / 2)
geometry.vertices.push new THREE.Vector3(0, pitch, -size.z / 2)
geometry.vertices.push new THREE.Vector3(size.x / 2, 0, -size.z / 2)
geometry.vertices.push new THREE.Vector3(-size.x / 2, 0, size.z / 2)
geometry.vertices.push new THREE.Vector3(0, pitch, size.z / 2)
geometry.vertices.push new THREE.Vector3(size.x / 2, 0, size.z / 2)
geometry.faces.push new THREE.Face3(0, 1, 2)
geometry.faces.push new THREE.Face3(5, 4, 3)
geometry.faces.push new THREE.Face3(0, 3, 4)
geometry.faces.push new THREE.Face3(4, 1, 0)
geometry.faces.push new THREE.Face3(5, 2, 1)
geometry.faces.push new THREE.Face3(4, 5, 1)
geometry.faces.push new THREE.Face3(0, 2, 3)
geometry.faces.push new THREE.Face3(3, 2, 5)

# UVs for front and back faces
geometry.faceVertexUvs[0].push [
  new THREE.Vector2(1, 1),
  new THREE.Vector2(0.5, 0.5),
  new THREE.Vector2(0, 0)
]
geometry.faceVertexUvs[0].push [
  new THREE.Vector2(1, 1),
  new THREE.Vector2(0.5, 0.5),
  new THREE.Vector2(0, 0)
]

geometry.computeFaceNormals()

Why is my mesh not being fully textured?

1 Answers