WebGL：使用THREE.MeshFaceMaterial時，每個人臉都有不同的方向

Question

我想用THREE.js框架在WebGL中製作一個建築。

我是新來的3D圖形和我從來沒有與任何其他工具（DX，OpenGL的，...）

我試圖創建一個使用下面的代碼在我的場景建築工作。

var windowTexture = THREE.ImageUtils.loadTexture('./images/windowside.png'); 

windowTexture.repeat.set(1,2); 

var windowMaterial = new THREE.MeshBasicMaterial({ map: windowTexture}); 

var buildingMaterial = new THREE.MeshFaceMaterial([ 
    windowMaterial, 
    windowMaterial, 
    windowMaterial, 
    windowMaterial, 
    topMaterial, 
    new THREE.MeshBasicMaterial({color: 0xffff00}) 
]); 

然後又做了BoxGeography

var geometry = new THREE.BoxGeometry(0.3, 0.3, 1); 
var building = new THREE.Mesh(geometry, buildingMaterial); 

最後將其添加到現場。 我沒有包含我認爲不重要的代碼。

現在，它顯示框就好了，其上有紋理。但質地完全錯誤。它看起來像這樣

顯然，每張臉都有不同的方向。

問題是 - 我使用正確的技術爲多個紋理框？ （頂部和底部不同）

有沒有更好的方法？

我該如何解決這個問題？

謝謝

Answer 1

您需要更改紋理順序。一些這樣的：

var buildingMaterial = new THREE.MeshFaceMaterial([ 
    windowMaterial, 
    windowMaterial, 
    new THREE.MeshBasicMaterial({color: 0xff0000}), 
    new THREE.MeshBasicMaterial({color: 0xff00ff}), 
    windowMaterial,  
    windowMaterial 
]); 

http://jsfiddle.net/nnphw58s/