ColladaLoader Three.js rendern nichts auf der Leinwand

Question

Ich arbeite gerade an einem Projekt, ich kann sehen, dass alles so geladen wird, wie es sein sollte und ich habe fortlaufend die Three.js Dokumentation gelesen, um zu sehen, was schief läuft, aber nichts Ich habe versucht hat funktioniert.

Vom Überprüfen der Konsole kann ich sehen, dass die Collada-Datei ordnungsgemäß geladen wurde, und der Fortschritt zeigt "100% Loaded".

Ich kann sehen, dass die Leinwand selbst geladen hat und die Farbe der Leinwand auch.

Ich kann auch sehen, die die Leinwand Animation wird von der Arbeit in einem console.log Zugabe()

Bitte beachten Sie den Code unten, und hoffentlich können euch ein Licht auf meiner dunklen Situation vergießen.

jQuery(window).load(function($){ 
var w = jQuery('.topSection .design').width(); 
var h = jQuery('.topSection .design').height(); 
var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(45, w/h, 1, 1000); 
var renderer = new THREE.WebGLRenderer(); 
var loader = new THREE.ColladaLoader(); 
var box; 

function init() { 
    loader.load('definition3D.dae', function (result) { 
      scene.add(result.scene); 
      camera.lookAt(scene.position); 
     }, function (xhr) { 
      console.log(Math.ceil(xhr.loaded/xhr.total * 100) + '% loaded'); 
     } 
    ); 

    renderer.setClearColor(0xdddddd); 
    renderer.setSize(w, h); 

    jQuery('.topSection .design').append(renderer.domElement); 
    console.log(loader); 
} 

var animate = function() { 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
}; 
init(); 
animate(); 

});

Vielen Dank im Voraus

Answer 1

Wenn Sie ein Zentrum nicht die Kameraposition und Ihr Modell angeben in 0,0,0 Sie beiden Elemente in der gleichen Position und wenn collada Material ist nicht doppelseitigem Sie kann nichts sehen.

zuerst versuchen, die Kamera weit vom Modell Sekunde zu bewegen, können Sie den Helfer BoundingBoxHelper verwenden, um die tatsächliche Position des Netzes (oder der Skala) zu sehen.

var bbox = new THREE.BoundingBoxHelper(result.scene, 0xff0000); 
    bbox.update(); 
scene.add(bbox); 

So können Sie sehen, ob Ihr Modell ein falsches Zentrum oder eine sehr kleine Größe haben.