Я пытаюсь смоделировать эффекты деформации изображения, используя текстуры поверх 2D геометрий, используя библиотеку ThreeJS. Я хочу применить изображение текстуры к полому кругу (в основном, к кольцу, построенному функцией THREE.RingGeometry) и получить результаты, показанные на этом изображении:

Далее я показываю результаты, которые я получаю в своей сцене, как для сплошного кольца, так и для его каркасной версии:

Проблема в том, что, как вы видите, текстура была нанесена радиальным образом, от центра кольца наружу. Однако, что мне действительно нужно, так это нанести изображение текстуры на концентрический круг, как показано на первом изображении этого вопроса.

Идея состоит в том, чтобы создать деформированную версию оригинальной текстуры поверх формы кольца. Я хотел бы знать, как этот эффект может быть программно достигнут с помощью Three.js таким образом, что конечной формой может быть любая произвольная 2D геометрия.

Ниже приведен соответствующий код, который я использую для рисования моей сцены:

var texture = THREE.ImageUtils.loadTexture('./images/texture.png');

var wireRing = new THREE.Mesh(new THREE.RingGeometry(10, 20, 50, 5, 0, Math.PI * 2), new THREE.MeshBasicMaterial({map: texture, wireframe: true}));
wireRing.position.set(-25, 50, 0);
scene.add(wireRing);

var ring = new THREE.Mesh(new THREE.RingGeometry(10, 20, 50, 5, 0, Math.PI * 2), new THREE.MeshBasicMaterial({map: texture}));
ring.position.set(25, 50, 0);
scene.add(ring);