JSON-Objekt manipulieren, nachdem es in three.js geladen wurde

Question

Ich bin neu in Javascript und noch neuer zu Three.JS. Ich habe erfolgreich ein obj und konvertiert und dann auf meiner Website als JSON-Objekt über three.js THREE.JSONLoader geladen. Es zeigt gut an, wie ich wollte, aber ich muss in der Lage sein, es wie jedes andere THREE.Mesh-Objekt zu drehen, zu animieren und zu manipulieren. Mein erster Versuch ist es, es zu drehen und zu animieren (ein Mesh-Stuhl) wie der Würfel in the first three.js tutorial. Jedoch, nachdem das Objekt zu laden und es innerhalb der „belebten()“ Funktion zu drehen versucht, die Variable I Set „MYchair“ erzeugt einen „undefiniert“ Fehler, wenn geschrieben:

myChair.rotation.x += 0.1;

Ich nehme an, dass es einen weiteren Schritt gibt, den ich für three.js nehmen muss, um diesen JSON wie ein THREE.Mesh-Objekt zu behandeln?

Hier ist mein Code:

viewport = document.getElementById('mycanvas'); 
 
h = viewport.offsetHeight; 
 
w = viewport.offsetWidth; 
 
var scene = new THREE.Scene(); 
 
scene.background = new THREE.Color(0xffffff); 
 
var camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000); 
 
var renderer = new THREE.WebGLRenderer(); 
 
renderer.setSize(w, h); 
 
viewport.appendChild(renderer.domElement); 
 

 
//end viewport 
 

 
var myChair = new THREE.JSONLoader(); 
 
myChair.load(
 
\t 'https://api.myjson.com/bins/iaxn7', 
 
\t function (geometry, materials) { 
 
\t \t var material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); 
 
\t \t var object = new THREE.Mesh(geometry, material); 
 
\t \t scene.add(object); 
 
\t } 
 
); 
 

 
alert(myChair); //this alert confirms that an object is stored in the variable 
 

 
var animate = function() { 
 
    requestAnimationFrame(animate); 
 

 
    myChair.rotation.x += 0.1; 
 
    myChair.rotation.y += 0.1; 
 

 
    renderer.render(scene, camera); 
 
}; 
 

 
animate();

Thanks so much! Jede Hilfe wird sehr geschätzt.

UPDATE: nach Marcos Antwort.

var myChairLoader = new THREE.JSONLoader(); 
 
var chairMesh = null; 
 

 
myChairLoader.load(
 
\t 'https://api.myjson.com/bins/iaxn7', 
 
\t function (geometry, materials) { 
 
\t \t var material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); 
 
\t \t var chairMesh = new THREE.Mesh(geometry,material); 
 
\t \t scene.add(chairMesh); 
 
    renderer.render(scene,camera); 
 
\t } 
 
); 
 

 
var animate = function(){ 
 
    requestAnimationFrame(animate); 
 

 
    if(chairMesh !== null){ 
 
    alert(); 
 
    chairMesh.rotation.x += 0.1; 
 
    chairMesh.rotation.y += 0.1; 
 
    } 
 
    renderer.render(scene,camera); 
 
}; 
 

 
animate();

Answer 1

Sie versuchen myChair zu animieren, die ein THREE.JSONLoader Objekt und nicht animiert werden können. Was Sie animieren sollten, ist das Mesh namens object, das Sie der Szene hinzugefügt haben. Ich empfehle Ihnen, Ihren Code wie folgt zu ändern:

var chairLoader = new THREE.JSONLoader(); 

// 1: Will remain null until the JSON file is loaded 
var chairMesh = null; 

chairLoader.load(
    'https://api.myjson.com/bins/iaxn7', 
    function (geometry, materials) { 
     var material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); 

     // 2: Once JSON is loaded, we use the variable from above, and turn it into a Mesh. 
     chairMesh = new THREE.Mesh(geometry, material); 

     // 3: Now we add it to the scene 
     scene.add(chairMesh); 
    } 
); 

alert(chairLoader); //this is not the chair you want to animate. This is its loader. 

var animate = function() { 
    requestAnimationFrame(animate); 

    // 4: Will animate chairMesh only after the JSON has been loaded. 
    if(chairMesh !== null){ 
     chairMesh.rotation.x += 0.1; 
     chairMesh.rotation.y += 0.1; 
    } 

    renderer.render(scene, camera); 
}; 

Mitteilung über die chairMesh Variable. Das ist der, den Sie animieren und der Szene hinzufügen möchten.

Side-Hinweis: Sie sollten nicht object als Variablennamen verwenden, da das ist schon ein reserviertes Schlüsselwort für JavaScript-Objekte und Verwirrung ... Zum Beispiel führen können, unter Verwendung einer Variablen mit dem Namen string sehr verwirrend sein können.