Three.js kann keine Texturen laden

Question

Ich habe ein Three.js-Projekt mit Augmented Reality und jetzt versuche ich, ein Modell mit Texturen zu laden. Aus irgendeinem Grund ist mein Modell schwarz und ich habe keine Texturen. Ich habe das Kästchen in Blender aktiviert, um die Bilder zu exportieren. Ich sehe auch, dass in der .js-Datei des T-Rex (Modell, das ich verwende) die Texturen aufgelistet sind, aber meine Anwendung wird sie nicht laden.

BEARBEITEN (CODE HINZUGEFÜGT) Der Code, den ich zum Laden des Modells verwende:

new THREE.JSONLoader().load("models/trex.json", function(geometry) {
                var material = new THREE.MeshFaceMaterial();

                var dino = new THREE.Mesh(geometry, material);

                dino.position.z = -50;
                dino.scale.x = dino.scale.y = dino.scale.z = 2;
                dino.updateMatrix();
                dino.overdraw = true;
                marker.object3d.add(dino);
            });

Ich füge dies dem Marker-Objekt hinzu, weil ich mit Markern arbeite. Wenn ich den Marker zeige, möchte ich, dass ein Trex auf dem Marker (oder direkt darüber) gezeichnet wird.

Das Trex-Modell ist das gleiche wie das hier, aber ich habe es in Blender geöffnet und die neueste Version des Blender to three.js-Exporters verwendet: http://alteredqualia.com/three/examples/webgl_trex.html

Auch meine trex.json-Datei sieht wie folgt aus:

{

    "metadata" :
    {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.63 Exporter",
        "vertices"      : 23273,
        "faces"         : 23268,
        "normals"       : 20842,
        "colors"        : 0,
        "uvs"           : [11497],
        "materials"     : 1,
        "morphTargets"  : 0,
        "bones"         : 0
    },

    "scale" : 0.0500,

    "materials": [  {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "Material.001",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.2933282256126404, 0.2933282256126404, 0.2933282256126404],
    "colorDiffuse" : [0.2933282256126404, 0.2933282256126404, 0.2933282256126404],
    "colorSpecular" : [0.13438941538333893, 0.13438941538333893, 0.13438941538333893],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "trex_image_copy.png",
    "mapNormal" : "trex_image_bump.png",
    "mapNormalFactor" : 12.0,
    "mapSpecular" : "trex_image_spec.png",
    "shading" : "Phong",
    "specularCoef" : 511,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
    },

    {
    "DbgColor" : 15597568,
    "DbgIndex" : 1,
    "DbgName" : "Material",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorDiffuse" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "trex_image_copy.png",
    "mapLight" : "trex_image_eye.png",
    "mapLightWrap" : ["repeat", "repeat"],
    "shading" : "Lambert",
    "specularCoef" : 1,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
    },

    {
    "DbgColor" : 60928,
    "DbgIndex" : 2,
    "DbgName" : "Material",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorDiffuse" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "trex_image_copy.png",
    "mapLight" : "trex_image_eye.png",
    "mapLightWrap" : ["repeat", "repeat"],
    "shading" : "Lambert",
    "specularCoef" : 1,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
    }],

    "vertices": 

Ich habe versucht, eine Box zu zeichnen und dann Texturen hinzuzufügen, das funktioniert, aber das Laden der Datei im json-Format und die Anzeige der Texturen funktioniert nicht.

Herzlichen Dank!

Answer 1

Ich denke, was Sie suchen, ist das Laden der Textur/Material aus Ihrem json. Die JSONLoader tatsächlich behandelt, dass für Sie. Das entsprechende Material wird als zweiter Parameter des Loader-Callbacks zurückgegeben. Dies funktioniert natürlich nur, wenn die json hält Materialdaten (in Ihrem Fall tut es).

new THREE.JSONLoader().load("models/trex.json", function(geometry, materials) {
     var material = new THREE.MeshFaceMaterial(materials);
     var dino = new THREE.Mesh(geometry, material);

     dino.position.z = -50;
     dino.scale.x = dino.scale.y = dino.scale.z = 2;
     dino.updateMatrix();
     dino.overdraw = true;
     marker.object3d.add(dino);
 });

Answer 2

Diese Lösung funktioniert nur mit den folgenden Versionen: r58 ~ r69
Bitte überprüfen Sie den Kommentarbereich und THREE.js-Migrationsseite für weitere Informationen

Ich hatte nicht so viel Glück beim Exportieren von Texturen, wie Sie es versuchen. Ich würde versuchen, nur mit dem JSON-Exporter, um Ihre Geometrie und UV-Mapping zu exportieren und behandeln das Laden von Texturen selbst. Es sei denn, jemand hat eine elegantere Lösung für Sie zu verwenden. Ich habe in der Lage, meine Texturen zu laden, dann in der Callback ein Material erstellen und verwenden Sie den Lader, um die Geometrie aus dem JSON zu erhalten. Dann in der Lader-Callback erstellen Sie Ihre Mesh mit sowohl die Geometrie und das Material, das Sie zuvor erstellt. Hier ist ein Beispielcode:

var tex, mat, mesh;

$(window).load(function () {
    /** Load mesh from JSON, position, scale, add texture and add to scene */
    tex = THREE.ImageUtils.loadTexture('../img/texture.jpg', new THREE.UVMapping(), function () {
            mat = new THREE.MeshPhongMaterial({ map: tex });
            loader.load('model.js', function (geo) {
                mesh = new THREE.Mesh(geo, mat);
                mesh.position.set(0, 0, 0);
                mesh.scale.set(20, 20, 20);
                // etc, etc
                scene.add(mesh);
            });
        });
});

Answer 3

Hast du versucht, der Textur Dateirechte zu geben?... diese Datei wird von Blender generiert, also musst du dieser Datei Rechte geben.