Jsonモデルをシーン内で自動回転させるにはどうすればいいですか？

Question

私はmouseeventを使うとボールメッシュを回転させることができます。

まず、私は、ウィンドウをクリックすると、メッシュがy軸に沿って回転させることができ

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

してみてください。

つまり、ウィンドウをクリックする前に、メッシュがシーンに完全に読み込まれます。

しかし、私はメッシュを自動回転させたいので、コードを修正しました。

セカンド

が、私は（）関数アニメーションで

ballmesh.rotation.y += 0.1; 

を追加してみてください。

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

は、私は、このエラーメッシュがまだ完全にロードされていないように見えます

TypeError: ballmesh is undefined 

を得ました。

メッシュを自動回転させたい場合、どのようにシャーリングすればいいですか？

Answer 1

ここで苦労しているのはthree.jsとは関係ありませんが、JavaScriptがイベントドリブン環境を提供し、セクションのコードが実際に実行されるときはと考える必要があります。

この特定の例では、モデルがロードされたことを要求するコールを送信し、その要求に「完了時」イベントを付加します。ここに登録しても、そのイベントハンドラコードはモデルがロードされて処理された後にのみ実行されます。

この要求が送信された直後に、メインコードが続けられ、シーンのアニメーションが開始されます。しかし、その完了イベントはまだ実行されておらず（モデルはまだ読み込まれています）、その未定義の変数エラーが発生します。

その後、モデルがロードされ、そのコードにアタッチされたイベントハンドラがその変数を設定しますが、未定義の変数のためにアニメーションループが既に壊れています。

あなたの特定の例のための問題を回避するための最も些細な方法は、それが可能になるまでメッシュを無視することです：

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

もう一つの方法は、しかし、addJsonToScnイベントハンドラからアニメーションのループを開始するかもしれませんその基本的なアプローチは、単一のロード・イベントを待つだけの場合のような簡単な例ではうまく機能します。