So verkleinern und vergrößern Sie die Größe eines Bildes auf einem Objekt - ThreeJS

Leider gibt es keinen einfachen Weg, dies in three.js zu tun.

Um die Texturierung nicht-trivialer Meshes richtig steuern zu können, müssen Sie wahrscheinlich einige UV-Entpacken des Modells zuerst. Dies sollte normalerweise von der Person gemacht werden, die die Meshes liefert, weil es viel einfacher ist, es in Tools wie Blender, 3dstudio, cinema4d und dergleichen zu tun.

Ich nehme jedoch an, dass Sie diese Person aus irgendeinem Grund nicht verfügbar haben und dies in Javascript tun müssen. Es macht mehr Spaß auf diese Weise. Nehmen wir weiter an, dass wir das Bild nur auf Vorder- und Rückseite des Beutels abbilden wollen, das Innere und die Kanten werden nicht texturiert.

In drei.js und den meisten anderen 3D-Anwendungen erfolgt die genaue Abbildung der Textur durch Bereitstellung von Texturkoordinaten (auch UV-Koordinaten genannt) für jeden Scheitelpunkt für jedes Gesicht. Diese UV-Koordinaten (von 0 bis 1) geben die Position in der Textur an, die zum Scheitelpunkt gehört. Der Punkt (0, 0) ist die linke untere Ecke des Bildes und (1, 1) die obere rechte Ecke, unabhängig vom Seitenverhältnis des Bildes.

Also, für ein einfaches Quad aus zwei Dreiecken wäre das etwa so:

Also, das ist nur die Geometrie selbst, aber es ist wichtig zu wissen, wie es für den nächsten Schritt gebaut wurde - die UV-Koordinaten:

Und das ist es im Grunde. Das ist ungefähr was THREE.PlaneGeometry tut. Einige weitere Punkte dazu:

• three.js kann zwei verschiedene Sätze von uv-Koordinaten verarbeiten, deshalb gibt es geometry.faceVertexUvs[0] .
• die Indizes innerhalb dieses Arrays entsprechen den Indizes im faces-array, also ist uvs[0] das erste Gesicht und uvs[1] das zweite.
• jeder von diesen ist wiederum ein Array der Länge 3, das den Scheitelpunkten dieses Gesichts entspricht.

Nun sollten Sie bei Ihren Taschen herausfinden können, welche zwei Gesichter die Vorderseite und die Rückseite sind. Sie müssen sie finden und ihre UV-Koordinaten bearbeiten, um sie an die Positionen in dem Bild anzupassen, das Sie sehen möchten (ich weiß nicht, wie genau diese Modelle aussehen, also kann ich Ihnen hier nicht viel weiterhelfen). Alle anderen UV-Koordinaten können auf einen sicheren Wert eingestellt werden, wie (0, 0) , dann hat alles, was nicht die Vorder- oder Rückseite ist, die Farbe des unteren linken Pixels Ihrer Textur.

Wenn Sie sie auch strukturieren möchten, sollten Sie die Textur-Map in einer geeigneten 3D-Bearbeitungssoftware in Betracht ziehen.

BEARBEITEN (2017-01-15)

Wenn Sie das Bild mit dem eckigen Logo betrachten, wird das obere linke Dreieck umgedreht. Dies liegt daran, dass three.js eine andere Gesichts- oder Scheitelpunkt-Reihenfolge verwendet als in meinem Beispiel.

Es hilft viel, diese Dinge zu verstehen, wenn Sie einfach in der Browser-Konsole oder im Debugger herumspielen (das habe ich gerade getan). Demnach hat die Ebenengeometrie von three.js die folgende Struktur:

Bemerkenswert ist hier, dass, aus welchem ​​Grund auch immer, das erste Gesicht im Gegenuhrzeigersinn und das zweite Gesicht im Uhrzeigersinn (ich glaube, das ist eine schlechte Praxis und Dreiecke sollten immer im Gegenuhrzeigersinn sein). Sehen Sie sich die faceVertexUVs für die Geometrie an, um zu sehen, wie sie für diesen Fall aussehen soll (geben Sie einfach new THREE.PlaneGeometry(1,1).faceVertexUvs[0] in die Browser-Konsole ein)

Nun zum anderen Punkt, Skalierung der Texturen. Eine Sache, die Sie versuchen könnten, ist, UV-Werte größer als 1 für die Scheitelpunkte zu verwenden. Dies würde dazu führen, dass die Textur kleiner gezeichnet wird. Dies funktioniert jedoch nur ordnungsgemäß, wenn

• Der Textur-Wrap-Modus ist Clamp-to-Edge ( texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping; )
• alle Texturen haben einen 1px breiten Rand in einer neutralen Farbe

Ansonsten (und das ist die Art, wie ich es empfehlen würde) sollten Sie eine Leinwand als Textur verwenden und das Bild vorbereiten, bevor Sie es tatsächlich verwenden. Ich habe hier ein einfaches Beispiel gemacht: Ссылка