Three.JS OBJ Modell zeigt nicht

Ich habe .obj Modell, als ich in c4d gemacht (gefunden) und es mit Maßstab 1 in Metern exportiert. Dann versuche ich es in Three.js mit OBJLoader zu laden, keine Fehler, aber das Modell wird nicht angezeigt. Was ist das Problem mit diesemThree.JS OBJ Modell zeigt nicht

<script src="http://threejs.org/build/three.js"></script> 
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script> 
<body style="margin:0;padding:0;"> 
</body> 
<script> 
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(45, innerWidth/innerHeight, 1, 2000); 
    var render = new THREE.WebGLRenderer(); 
    camera.position.set(0, 0, 53); 

    render.setSize(innerWidth, innerHeight); 
    document.body.appendChild(canvas = render.domElement); 

    render.setClearColor(0x111111, 1); 

    function loadScene() { 
     var loader = new THREE.OBJLoader(); 
     loader.load("./fox.obj", function(model) { 
      model.traverse(function(child) { 
       if (child instanceof THREE.Mesh) { 
        child.material.color = 0xffb830; 
       } 
      }); 
      model.position.set(0, 0, -53); 
      scene.add(model); 
      window.model = model; 
     }); 
     render.render(scene, camera); 
    } 

    window.onload = loadScene; 
</script>

Quelle

2016-05-16 WildeMe

nicht die Antwort: setzen Sie Javascript in Kopf oder Körper. –

als überhaupt keine Angelegenheit – WildeMe

Sie können versuchen, den Boundingbox Helfer http://threejs.org/docs/#Reference/Extras.Helpers/BoundingBoxHelper zu verwenden, um zu überprüfen, ob die Position und die Größe des geladenen Modells korrekt sind . –

ich es gemacht Arbeit: (einfachere Korrektur in UPDATE unten)

1 - Entfernen Sie diese Zeile:

render.render(scene, camera);

2 - Hinzufügen dieses Codeabschnitts nach den Initialisierungen:

function animate() { 
     requestAnimationFrame(animate); 
     render.render(scene, camera); 
    } 
    animate();

3 - Auch mit einer anderen Quelle für die three.js-Bibliothek. Ich habe die lokale Kopie, die ich gerade verwende, in ein anderes Projekt eingefügt, und es hat funktioniert. Wahrscheinlich versuchen Sie, die Datei direkt aus dem Download-Link herunterzuladen: https://github.com/mrdoob/three.js/archive/master.zip

Sie sollten auch versuchen, OrbitControls zur Szene hinzuzufügen, so dass Sie durch den Orbit navigieren/navigieren können Szene, weil das Objekt größer sein könnte als du erwartest und nicht (offensichtlich) deswegen zeigst. Sie können Orbit Kontrollen hinzufügen, indem Sie die OrbitControls.js in der three.js Quelle, und fügen Sie die folgende Zeile in den Code ein:

var controls = new THREE.OrbitControls(camera, render.domElement);

UPDATE:

das Rufen Render innerhalb der Funktion der Last Methode, wie ManoDestra vorgeschlagen:

loader.load("./fox.obj", function(model) { 
    model.traverse(function(child) { 
     if (child instanceof THREE.Mesh) { 
      child.material.color = 0xffb830; 
     } 
    }); 
    model.position.set(0, 0, -53); 
    scene.add(model); 
    window.model = model; 
    render.render(scene, camera); 
});

Quelle

2016-05-17 00:43:55

Komisch, ich habe die Tatsache völlig übersehen, dass es keine Render-Loop-Einrichtung gibt. Nach der Zeile, die das geladene Modell positioniert, habe ich aufgehört zu lesen. – pailhead

Ich denke Mano Destras Antwort ist richtiger. Sie erweitern den ursprünglichen Code, indem Sie Interaktivität über den Orbit-Controller und eine Render-Schleife hinzufügen. Wenn die Anforderung nur einmal angezeigt werden soll, sollte dies nach dem Laden des Objekts erfolgen. – pailhead

Der Orbit-Controller war nur ein Vorschlag an den Benutzer zum Debuggen (versucht, das Objekt zu finden, das größer als erwartet oder an einer anderen Position sein könnte). Über die Notwendigkeit einer Render-Schleife dachte ich auch, dass das Aufrufen der Renderer-Funktion nur einmal nach dem Laden des Objekts ausreichen würde, aber ich habe den Code getestet, und es hat nicht funktioniert. Durch das Hinzufügen der Renderschleife funktionierte es perfekt. –

Das Problem ist, dass Sie Ihre Szene rendern, bevor das Objekt geladen wurde.

Platzieren Sie Ihren render.render-Aufruf (Szene, Kamera) so, dass er erst aufgerufen wird, nachdem Ihr Modell geladen wurde. Z.B.

function loadScene() { 
    var loader = new THREE.OBJLoader(); 
    loader.load("./fox.obj", function(model) { 
     model.traverse(function(child) { 
      if (child instanceof THREE.Mesh) { 
       child.material.color = 0xffb830; 
      } 
     }); 
     model.position.set(0, 0, -53); 
     scene.add(model); 
     window.model = model; 
     render.render(scene, camera); 
    }); 
}

Ich würde auch sicherstellen, dass alle Ihre Quelle im Kopfteil vorhanden ist (oder der Schwanz Ihres HTML, wenn das Ihre Präferenz ist). Rufen Sie dann einfach Ihren Initialisierungscode für das Ladeereignis des Fensters auf. Und, wie oben erwähnt, rendern Sie die Szene erst, nachdem alle Ihre Assets geladen wurden.

Sie auch einen Anruf an der Szene zu suchen erfordern, zum Beispiel ...

camera.lookAt(scene.position);

Oh, auch, child.material.color ein Objekt ist zum Beispiel child.material.color = { r:1, g:1, b:1 }.

Quelle

2016-05-16 19:36:29 ManoDestra

Warum ist das ein Problem? Three.js unterstützt das Hinzufügen und Entfernen von Knoten aus einem Szenengraphen, d. Sie können mit dem Rendern beginnen, dann etwas laden und dann der Szene hinzufügen, während Sie eine Art von Rendering-Logik ausführen (entweder konstante Updates oder etwas Komplizierteres). Dies hat null (0) Auswirkungen darauf, ob dieses Ding gezogen wird oder nicht. Sicher, die Kamera schaut vielleicht nicht auf das Objekt, aber einige Annahmen können gemacht werden. DREI ist rechtshändig, also machen diese Zahlen Sinn. Eine Standardkamera schaut nach unten -z, sie wird nach z == 53 verschoben, Objekt zu z == - 53, zwischen Kamera und Objekt befinden sich 106 Einheiten. – pailhead

Ich entschuldige mich für den Kommentar, Ihre Antwort ist eigentlich völlig korrekt. Er rendert die Szene nur einmal, bevor etwas geladen wird. Ich würde vielleicht nur mit dem Wortlaut argumentieren, das ist an sich noch immer nicht das Thema, das Problem ist, dass er danach nichts mehr rendert. Diesem Code fehlt höchstwahrscheinlich die Render-Schleife. Ich hörte einfach auf, nach der Zeile zu lesen, die das Objekt positioniert. – pailhead

Angesichts des Codes und der Anforderung, die Szene nur einmal zu rendern (keine Renderschleife), ist Ihre Antwort hier die einzig gültige. – pailhead

Bewerben THREE.MeshBasicMaterial({color:'red'}) auf alle Ihre geladenen Maschen, um die Dinge zu beseitigen, wie Normalen fehlen, Lichter fehlen, Texturen etc (Dieses Material sollte nichts davon benötigen, um zu funktionieren) fehlt.
Blick auf model.children[N].geometry.vertices zu sehen, ob Sie gültige Werte haben es

Quelle

2016-05-16 20:25:42 pailhead

Three.JS OBJ Modell zeigt nicht

Antwort

Verwandte Themen