Three.js：如何重复纹理答案

【问题标题】：Three.js: How to Repeat a TextureThree.js：如何重复纹理
【发布时间】：2013-05-04 09:46:08
【问题描述】：

使用下面的代码，我想设置矩形的纹理，但问题是纹理图像不会在整个矩形上重复：

var penGeometry = new THREE.CubeGeometry(length, 15, 120);
var wallTexture = new THREE.ImageUtils.loadTexture('../../3D/brick2.jpg');
wallTexture.wrapS = wallTexture.wrapT = THREE.MirroredRepeatWrapping;
wallTexture.repeat.set(50, 1);
var wallMaterial = new THREE.MeshBasicMaterial({ map: wallTexture });
var line = new THREE.Mesh(penGeometry, wallMaterial);
line.position.x = PenArray.lastPosition.x + (PenArray.currentPosition.x - PenArray.lastPosition.x) / 2;
line.position.y = PenArray.lastPosition.y + (PenArray.currentPosition.y - PenArray.lastPosition.y) / 2;
line.position.z = PenArray.lastPosition.z + 60;
line.rotation.z = angle;

纹理图像为http://wysnan.com/NightClubBooth/brick1.jpg 结果是http://wysnan.com/NightClubBooth/brick2.jpg

只有一块纹理被正确渲染，而不是整个矩形，为什么？以及如何用这个纹理图像渲染所有的矩形？

【问题讨论】：

您是否尝试过使用 THREE.RepeatWrapping 看看会发生什么？
现在可以使用 WestLangley 的方法准确地工作（纹理的尺寸必须是二次方）。

标签： three.js

【解决方案1】：

对于重复包装，您的纹理尺寸必须是二次方 (POT)。

例如 (512 x 512) 或 (512 x 256)。

three.js r.58

【讨论】：

哇，为此苦苦挣扎。非常感谢！