纹理未在 Three.js 的侧面应用答案

【问题标题】：Texture not getting applied on sides in Three.js纹理未在 Three.js 的侧面应用
【发布时间】：2016-11-25 01:02:31
【问题描述】：

我有一个通过拉伸 png 图像创建的网格。我参考了代码http://wizgrav.github.io/three.js/runner/。我正在对网格使用 THREE.MeshPhongMaterial。我正在使用纹理贴图，但纹理仅应用于网格的正面和背面，而不是侧面。请看下面的附图。

侧面占据纹理的最暗颜色。

我去了threejs.org/editor并添加了一个简单的立方体并应用了具有相同纹理的相同THREE.MeshPhongMaterial材质，它被应用到了立方体的所有侧面。但在我的情况下，纹理没有应用在侧面。

代码：

var texture = THREE.ImageUtils.loadTexture('/Content/texture-green.jpg');
var bumpTexture = THREE.ImageUtils.loadTexture('/Content/texture-green-bump.jpg');
var specularTexture = THREE.ImageUtils.loadTexture('/Content/texture-green-specular.jpg');

var material = new THREE.MeshPhongMaterial({
    map: texture,
    bumpMap: bumpTexture,
    bumpScale: 0.03,
    specularMap: specularTexture
});

var g = new THREE.CanvasGeometry(canvas, { "height": 0.1, "solid": solid, "offset": window.thr, "steps": (steps ? Math.abs(steps) : 5) });
g.center();
mesh = new THREE.Mesh(g, material);
scene.add(mesh);

那么，几何的形成方式有问题吗（http://wizgrav.github.io/three.js/runner/CanvasGeometry.js）？还是有其他方法可以在网格的侧面添加纹理？

谢谢。

【问题讨论】：

我至少看到侧面有纹理条纹，这是 UV 纹理贴图问题，因为代码生成了这个跑步者，你必须寻找一种方法来包裹 UV。 stackoverflow.com/questions/19891507/…我希望这个链接有帮助。
@LeroyThompson 感谢您的帮助。我通过了那个链接，但它没有帮助我。这个stackoverflow.com/a/27317936/5275732 正是我想要的，它对我有用。

标签： javascript three.js texture-mapping

【解决方案1】：

我关注了this 链接，它对我有用。我必须对纹理做一些小改动才能让它正确。

texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
texture.offset.set(0.5, 0.5);

希望这对某人也有帮助。

【讨论】：

很高兴我帮了一些忙，我喜欢这种包装方法。