Ich habe ".obj" und ".mtl" -Dateien eines Modells und lade es über OBJMTLLoader . ".mtl" gibt die Textur an, die auf ein Modell angewendet werden soll, und three.js lädt das Modell und rendert es mit der angewandten Textur, ganz einfach.
Aber hier ist das Ding.
Sobald ein Objekt geladen ist, möchte ich eine andere Textur darauf anwenden. Dies liegt daran, dass die erste Textur das Oberflächenmaterial eines Objekts darstellt. Und die zweite Textur ist eine Zeichnung, die ich an einem bestimmten Ort auf einem Modell positionieren möchte.
Meine Frage ist: Wie man eine zweite Textur auf ein bereits geladenes (und texturiertes) Objekt anwendet ?
Ich sehe, dass three.js eine Instanz von THREE.Object3D erstellt, und diese Instanz hat das Array "children" mit einer Instanz von THREE.Mesh .
Wenn ich versuche, eine Textur auf dieses Mesh anzuwenden ( mesh.material.map = texture ), verliere ich die ursprüngliche Textur.
Ich habe diese Frage zum Anwenden mehrerer Texturen und JSONLoader untersucht, aber keine gefunden antworte.
Ich habe auch versucht, new THREE.MeshFaceMaterial( materials ) (wie in diese Antwort ) zu verwenden, aber erfolglos.
AKTUALISIEREN :
Ich habe @ WestLangleys Vorschlag versucht, ein Multi-Material-Objekt zu verwenden, kann aber immer noch kein Material über einem anderen rendern.
Ich habe diese einfache Demo erstellt, die von three.js OBJLoader - Ссылка
angepasst wurde > Ich verwende THREE.SceneUtils.createMultiMaterialObject wie vorgeschlagen und übergebe es geklonte Geometrie des Hauptnetzwerks, das von .obj geladen wurde. Ich gebe auch 2 Texturen - eine für die gesamte Oberfläche, eine andere - für die Vorderseite des Modells.
Aber das funktioniert nicht. Ich habe 2 Checkboxen hinzugefügt, die die "sichtbare" Eigenschaft der entsprechenden Materialien umschalten. Sie können sehen, dass Materialien vorhanden sind, aber ich kann den ersten von unterhalb des zweiten nicht sehen.
Der Kern des Ladens / Renderns ist wie folgt:
%Vor%UPDATE # 2
An dieser Stelle denke ich, dass es am besten ist, THREE.ShaderMaterial zu verwenden, um eine Textur auf eine andere anzuwenden. Ich sehe einige Beispiele für die Verwendung einer Textur , bin mir aber immer noch nicht sicher, wie beide angezeigt werden sollen überlagerter Zustand Ich bin mir auch nicht sicher, wie ich die Textur an einer bestimmten Stelle auf einem Mesh positionieren soll.
Sie haben mehrere Möglichkeiten:
Sie können die Bilder auf der JavaScript-Seite mithilfe von Leinwandwerkzeugen mischen und ein einzelnes Material mit einer einzelnen Texturkarte erstellen.
Sie können ein Multi-Material-Objekt aus einer einzelnen Geometrie und einem Array von Materialien erstellen. (Dieser Ansatz erstellt nur mehrere identische Netze mit jeweils einem der Materialien und wird normalerweise verwendet, wenn eines der Materialien Drahtgitter ist. Es funktioniert möglicherweise auch, wenn ein Material transparent ist.)
THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
Sie können einen Multi-Texture-Effekt mit einem benutzerdefinierten ShaderMaterial erzielen. Habe zwei Textureingaben und implementiere Farbmischung im Shader.
Hier ein Beispiel für die einfachste three.js ShaderMaterial -Möglichkeit, die das Mischen zweier Texturen implementiert: Ссылка .
EDIT: fiddle aktualisiert zu three.js r.85
BEARBEITEN: Fiddle-Ressourcen wurden geändert, um über https geladen zu werden
Ihr geladenes Objekt hat Geometrie (zusammen mit seinen Eckpunkten, Flächen und UVs) und Material. Erstelle ShaderMaterial, das die Texturen auf eine Weise kombiniert, die zu dir passt, und erzeuge Mesh mit Geometrie aus geladenem Objekt.
Verwende ShaderMaterial und setze beide Texturen als Uniformen und mische sie dann innerhalb des Shaders.
Also machst du ShaderMaterial:
%Vor%Und ein Mesh mit diesem Material erstellen:
%Vor%Sie können den einfachsten Vertex-Shader setzen:
%Vor%Und ein Fragment-Shader, der das Mischen durchführt:
%Vor%Tags und Links javascript three.js webgl mesh textures