在 Three.js 中未在侧面应用纹理

Question

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

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

我去了 threejs.org/editor 并添加了一个简单的立方体并应用了相同的 THREE.MeshPhongMaterial material 和相同的纹理，它被应用到立方体的所有侧面。但在我的例子中，纹理没有应用在两侧。

代码：

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)？还是有另一种方法可以将纹理添加到网格的侧面？

谢谢。

Answer 1

我关注了 this link，它对我有用。我必须对纹理做一点小改动才能使其正确。

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

希望这对某人也有帮助。

在 Three.js 中未在侧面应用纹理

Texture not getting applied on sides in Three.js

javascript

texture-mapping

three.js