为什么我的网格没有完全纹理化？

Question

我不完全确定这里的问题是什么，我们将非常感谢任何帮助。我正在Three.js中创建一个建筑物，并开始构建模型。模型的基础（意思是简单的建筑形状，没有修剪和排水沟）是使用ThreeCSG库创建的，通过THREE.Geometry组合了一些手工编码的几何图形（基本上是一个用于建筑的框和屋顶间距的三角形）。

当我将重复纹理应用于模型时，屋顶间距不会被纹理化，尽管它会接收应用的任何颜色和阴影/照明设置。我不知道这笔交易是什么。如果我换出常规THREE.BoxGeometry的手绘三角形屋顶间距几何图形，则它会正确纹理化。

THREE.Geometry不允许纹理吗？我需要做一些特殊的UV工作来将纹理应用到这样的形状上吗？我不太了解纹理映射，所以任何帮助都会受到赞赏。

下面您可以看到放置在建筑物网格上的线框网格，显示了这些面。关于为什么建筑物的顶面没有像下面那样被纹理化，但颜色正在应用的任何想法？

这是我用来创建屋顶间距几何图形的代码（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()

然后我将用它创建的网格与THREE.BoxGeometry合并，创建上面看到的最终CSG网格。我在这里错过了一步吗？

Answer 1

结束是因为我没有为自定义几何定义任何UV（而Three.js会自动定义它们，例如THREE.BoxGeometry）。在为屋顶的正面和背面定义2个UV后，正确应用纹理。

# 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()