JSONオブジェクトをthree.jsでロードした後に操作する

Question

私はJavascriptを初めて使用し、さらにThree.JSを新しくしました。私は正常にobjを取得し、変換して、JSONオブジェクトとして私のサイトにthree.js THREE.JSONLoader経由でロードしました。私が望むようにそれは表示されますが、他のTHREE.Meshオブジェクトのように回転、アニメーション、および操作ができる必要があります。私の最初の試みは、the first three.js tutorialの立方体のようにそれを回転させてアニメートすることです（メッシュの椅子）。書かれた場合しかし、オブジェクトをロードし、「アニメーション（）」関数内でそれを回転させるように試みた後、私は「myChair」を設定している変数は、「未定義」エラーを生成している。

myChair.rotation.x += 0.1;

私はこのJSONをTHREE.Meshオブジェクトのように扱うためにthree.jsのために取らなければならない別のステップがあると思いますか？ここで

は私のコードです：

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();

本当にありがとうございました！どんな助けでも大歓迎です。

更新：Marcoの応答後。

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

あなたはTHREE.JSONLoaderオブジェクトであり、アニメーション化することができないmyChairをアニメーション化しようとしています。アニメーションする必要があるのは、シーンに追加したobjectというメッシュです。コードを次のように変更することをお勧めします。

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); 
}; 

chairMeshに注目してください。アニメーションしてシーンに追加したいものです。

サイドノート：objectを変数名として使用しないでください。これは既にJavaScriptオブジェクトの予約キーワードであり、混乱を招く可能性があります。たとえば、stringという変数を使用すると、非常に混乱する可能性があります。