2016-02-01 25 views
0

我不完全確定問題在這裏,任何幫助將不勝感激。我正在Three.js中創建一個建築,並開始對模型進行紋理處理。使用ThreeCSG庫,通過THREE.Geometry(基本上是建築物的一個箱子和屋頂瀝青的三角形)組合幾個手工編碼的幾何圖形創建模型的基礎(意思是簡單的建築物形狀,沒有修剪和排水溝)。爲什麼我的網格沒有完全變形?

當我將重複紋理應用於模型時,儘管它接收到應用的任何顏色和陰影/照明設置,但屋頂間距沒有變形。我不知道這筆交易在這裏。如果我將普通THREE.BoxGeometry的手繪三角形屋頂傾斜幾何替換爲正確的紋理。

請問THREE.Geometry不允許紋理?我需要做一些特殊的UV工作來將紋理應用於這種形狀嗎?我不是很熟悉紋理貼圖,所以任何幫助,將不勝感激。

下面您可以看到一個線框網格放置在建築物網格上,顯示了面。關於爲什麼建築物的頂面沒有像下面那樣的紋理,但是顏色被應用的任何想法?

Three.js texture issue

下面是我使用的用於創建屋頂斜度幾何(的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你在上面看到的網格。我在這裏錯過了一步嗎?

回答

0

結束了,因爲我沒有爲自定義幾何體定義任何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() 

enter image description here

相關問題