Текстура не накладывается по сторонам в Three.js

Question

У меня есть сетка, которая создается путем выдавливания PNG-изображения. Я ссылался на код http://wizgrav.github.io/three.js/runner/. Я использую ТРИ.МешфхонгМатериал для сетки. Я использую карту текстуры, но текстура применяется только к передней и задней части сетки, а не по бокам. Пожалуйста, смотрите прикрепленное изображение ниже.

Стороны принимают самый темный цвет текстуры.

Я пошел на 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)? Или есть другой способ добавить текстуры по сторонам сетки?

Спасибо.

Answer 1

Я перешел по этой ссылке, и она сработала для меня. Я должен был сделать одну небольшую поправку на текстуру, чтобы сделать это правильно.

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

Надеюсь, это кому-то тоже поможет.