Работая с тремя. js r113, я создаю стены из координат чертежа динамически как пользовательские геометрии. Я настроил vertices, faces and faceVertexUvs уже успешно. Теперь я хотел бы обернуть эти геометрии текстурированным материалом, который повторяет текстуру и сохраняет исходное соотношение сторон. Поскольку стены имеют разную длину, мне было интересно, какой из подходов лучше всего сделать это?
То, что я до сих пор пробовал, - это загрузить текстуру один раз, а затем использовать разные значения texture.repeat, в зависимости от стены. length:
let textures = function() {
let wall_brick = new THREE.TextureLoader().load('../textures/light_brick.jpg');
return {wall_brick};
}();
function makeTextureMaterial(texture, length, height) {
const scale = 2;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( length * scale, height * scale );
return new THREE.MeshStandardMaterial({map: texture});
}
Затем я вызываю вышеуказанную функцию после создания геометрии и назначаю возвращенные материалы массиву материалов, чтобы применить его к граням передней и задней части каждой стены. Примечание: material.wall является нетекстурированным MeshStandardMaterial для других граней.
let scaledMaterial = [
makeTextureMaterial(textures.wall_brick, this.length.back, this.height),
makeTextureMaterial(textures.wall_brick, this.length.front, this.height),
material.wall
];
this.geometry.faces[0].materialIndex = 0; // back
this.geometry.faces[1].materialIndex = 0; // back
this.geometry.faces[2].materialIndex = 1; // front
this.geometry.faces[3].materialIndex = 1; // front
this.geometry.faces[4].materialIndex = 2;
this.geometry.faces[5].materialIndex = 2;
this.geometry.faces[6].materialIndex = 2;
this.geometry.faces[7].materialIndex = 2;
this.geometry.faces[8].materialIndex = 2;
this.geometry.faces[9].materialIndex = 2;
this.geometry.faces[10].materialIndex = 2;
this.geometry.faces[11].materialIndex = 2; // will do those with a loop later on :)
this.mesh = new THREE.Mesh(this.geometry, scaledMaterial);
В результате получается, что текстура отображается на нужных гранях, но не масштабируется индивидуально по this.length.back и this.length.front
Есть идеи как это сделать? Спасибо.