为什么我的纹理不能正确重复？答案

【问题标题】：Why isn't my texture repeating correctly?为什么我的纹理不能正确重复？
【发布时间】：2016-03-22 11:21:18
【问题描述】：

我正在尝试使用 THREE.RepeatWrapping 将砖纹理应用到我的墙上，但由于某种原因它没有正确重复。我正在使用一个大立方体作为墙壁，并且在 THREE.BackSide 的帮助下，我使纹理只出现在立方体的内部。

var wallGeometry = new THREE.BoxGeometry(200, 100, 200);
texture = THREE.ImageUtils.loadTexture("textures/bricks.jpg");
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x = 170 / 100;
texture.repeat.y = 170 / 100;

var material = new THREE.MeshPhongMaterial();
material.map = texture;
var wall = new THREE.Mesh(wallGeometry, material);

wall.material.side = THREE.BackSide;

scene.add(wall);

结果如下所示。

提前致谢！

【问题讨论】：

正如您在jsfiddle.net/567xyxo4 看到的那样，您的代码应该可以正常工作。
谢谢，纹理可能不适合它
通常纹理不是问题
我现在正在使用另一种纹理，并且由于某种原因它可以正常工作

标签： 3d three.js webgl

【解决方案1】：

你的纹理在每个维度上都是 2 的幂吗？ WebGL 不能重复非幂的 2 个纹理。例如，640x480 纹理不会重复，因为 640 和 480 都不是 2 的幂。1024x768 也不会重复，因为虽然 1024 是 2 的幂，但 768 不是。一个 512x256 的纹理会重复，因为两个维度都是 2 的幂。

【讨论】：