Wie wird ein Json-Modell in der Szene automatisch gedreht?

Question

Ich kann den Ballmesh drehen, wenn ich mouseevent benutze.

Erster Versuch

var jsonLoader = new THREE.JSONLoader(); 
jsonLoader.load('models/ball.json', addJsonToScn); 

function addJsonToScn(geometry) { 
     var ball = new THREE.BufferGeometry().fromGeometry(geometry); 
     var mtl = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
     ballmesh = new THREE.Line(ball, mtl); 
     scene.add(ballmesh); 
    } 

document.addEventListener('click', rotateMesh, false); 

function rotateMesh() { 
    ballmesh.rotation.y += 0.1; 
} 


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

Wenn ich Fenster klicken, wird das Gitter entlang der y-Achse drehen kann.

Das bedeutet, bevor ich auf Fenster klicke, wird das Mesh vollständig in die Szene geladen.

Allerdings möchte ich das Gitter automatisch drehen lassen, also habe ich den Code geändert.

Zweitens versuchen

I

ballmesh.rotation.y += 0.1; 

in der Funktion belebten() hinzufügen;

var jsonLoader = new THREE.JSONLoader(); 
jsonLoader.load('models/ball.json', addJsonToScn); 

function addJsonToScn(geometry) { 
     var ball = new THREE.BufferGeometry().fromGeometry(geometry); 
     var mtl = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
     ballmesh = new THREE.Line(ball, mtl); 
     scene.add(ballmesh); 
    } 

document.addEventListener('click', rotateMesh, false); 

function rotateMesh() { 
    ballmesh.rotation.y += 0.1; 
} 


function animate() { 
    ballmesh.rotation.y += 0.1; 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
} 

Ich habe diesen Fehler

TypeError: ballmesh is undefined 

Es sieht aus wie das Netz noch nicht vollständig geladen ist.

Wenn ich das Netz automatisch drehen möchte, wie shoule ich?

Answer 1

Was Sie hier zu kämpfen haben, hat nichts mit three.js zu tun, sondern die Tatsache, dass JavaScript eine ereignisgesteuerte Umgebung bietet, und Sie müssen in Betracht ziehen, wenn Codeabschnitte in der Realität ausgeführt werden.

In diesem speziellen Beispiel senden Sie einen Aufruf, um das Laden eines Modells anzufordern, und fügen der Anforderung ein Ereignis "bei Abschluss" hinzu. Auch wenn Sie es hier registrieren, wird dieser Event-Handler-Code erst nach dem Laden und Verarbeiten des Modells ausgeführt.

Gleich nachdem diese Anfrage gesendet wurde, wird Ihr Hauptcode fortgesetzt und beginnt mit der Animation der Szene. Dieses Abschlussereignis wurde jedoch noch nicht ausgeführt (das Modell wird noch geladen), und Sie erhalten diesen undefinierten Variablenfehler.

Irgendwann danach wird Ihr Modell geladen, und der Event-Handler, der an diesen Code angehängt ist, wird jetzt diese Variable setzen ... aber Ihre Animationsschleife ist bereits wegen der undefinierten Variable gebrochen.

Die banalsten Art und Weise, um das Problem für Ihr spezielles Beispiel zu arbeiten, ist das Netz zu ignorieren, bis es fertig ist:

function animate() { 
    if (ballmesh !== undefined) { 
     ballmesh.rotation.y += 0.1; 
    } 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
} 

Ein andere Möglichkeit könnte sein, Ihre Animationsschleife von den addJsonToScn Event-Handler allerdings zu starten, Dieser grundlegende Ansatz funktioniert nur bei trivialen Beispielen wie diesen, bei denen Sie nur auf ein einzelnes Ladeereignis warten möchten.