在three.js中，当对一个框使用单个纹理时，侧面看起来与顶面和底面不同。
为什么会这样？如何使6张脸的纹理看起来相似？
以下是与纹理相关的代码部分
var corkTexture = new THREE.ImageUtils.loadTexture( 'img/cork-256.png' );
corkTexture.wrapS = corkTexture.wrapT = THREE.MirroredRepeatWrapping;
corkTexture.repeat.set( 10, 10 );
corkTexture.offset.set(0.5, 0.5);
var corkMaterial = new THREE.MeshBasicMaterial( { map: corkTexture } );
在此网址中，您可以看到完整的代码和结果
http://heyplay.org/animation/index.html
谢谢。
最佳答案
使用默认的BoxGeometry，您的纹理将被变换为适合整个表面。这意味着对于正方形纹理，正方形表面看起来正确，但是较短的表面将具有压缩的纹理，而较高的表面将具有拉伸的纹理。
考虑您有一个10w×10h×10d的框。如果将正方形纹理应用于框，则所有面都将看起来相同。但是，如果您的框是10w×2h×10d，则顶部和底部看起来正确，但短边的纹理会变硬，就像您看到的问题一样。
通过调整所有四个侧面的顶部或底部顶点的UV值，可以使短框的侧面看起来相似（并帮助您获得重复的纹理）。
看看Geometry.faceVertexUvs。这是存储紫外线信息的位置。确定要更新的顶点，然后更改关联的UV的值。 （决定使用什么值超出了此问题的范围，但我建议您根据面部与纹理的长宽比来选择这样做。）