Ich versuche, mithilfe der ThreeJS-Bibliothek Bilddeformationseffekte mithilfe von Texturen über 2D-Geomtrien zu simulieren. Ich möchte ein Texturbild über einen hohlen Kreis (im Grunde genommen einen Ring, der mit der Funktion THREE.RingGeometry erstellt wurde) anwenden und die in diesem Bild gezeigten Ergebnisse erhalten:

Im Folgenden zeige ich die Ergebnisse, die ich in meiner Szene sowohl für den massiven Ring als auch für die Version mit Drahtgitter erhalte:

Das Problem ist, dass die Textur, wie Sie sehen, radial von der Mitte des Rings nach außen aufgetragen wird. Was ich jedoch wirklich brauche, ist das Anwenden des Texturbildes auf einer konzentrischen Kreisbahn, wie im ersten Bild dieser Frage gezeigt.

Die Idee ist, eine deformierte Version der ursprünglichen Textur über eine Ringform zu erzeugen. Ich möchte wissen, wie dieser Effekt durch Three.js programmgesteuert erreicht werden kann, sodass die Zielform eine beliebige 2D-Geometrie sein kann.

Im Folgenden ist der relevante Code aufgeführt, mit dem ich meine Szene zeichne:

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);