javascript - WebGL : When using THREE. MeshFaceMaterial，每个面都有不同的方向

Question

我正在尝试使用 THREE.js 框架在 WebGL 中 build 一座建筑。

我是 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/