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);

最后将它添加到场景中。 我没有包含我认为不重要的代码。

现在，它显示Box就好了，上面有纹理。但质地完全错了。看起来像这样

显然，每张脸都有不同的方向。

问题是 - 我是否正在使用具有多个纹理的Box的正确技术？ （顶部和底部不同）

有更好的方法吗？

我该如何解决这个问题？

由于

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/