質問: new THREE.Mesh( textGeo, sMaterial ); sText.position.set(points[0].position.x,points[0].position.y, points[0].position.z); text_array.push(sText); scene.add( sText ); }); do whileでも駄目でしたので、恐らくループのネストの中に入れてはいけないものを 書いてしまっているのではないかと思うのですが、色々変えてもどこが悪いか特定できません。 http://chatora.lolipop.jp/?p=176 こちらのサイトを参考にさせていただきましたが、ループを使ったTextGeometryの配置は可能なようです。 違うのはThree.jsのバージョンの違いから、フォントデータ(json)をhtmlではなくscriptの中から 読み込んでいる点です。 どこが悪いかご教授下さい。よろしくお願いします。
回答: よく陥りやすいコード実装です。 ループ内において非同期で呼び出される関数(今回の場合はloader.load()のコールバック関数)の中で、ループされる変数を使用すると、最後の値で実行されます。これは、ループが先に完了してしまい後から非同期で関数が実行されるためです。 ですので、別関数にして呼び出すか、クロージャーを使用して非同期関数を呼び出します。 それ以前に、フォントパス情報(typeface.js)をロードしていますが、ループ内でやってしまうと何回もロードされてしまいます。これは1回のロードで十分です。 ``` // 先にfontをロードしておく loader.load( 'fonts/helvetiker_regular.typeface.js', function (font) { // ロードが完了したらTextのMesh生成 createText(font); }); function createTxtMesh(font) { for (var i = 0; i < Name.length; i++) { var txtGeo = new THREE.TextGeometry({ font: font, ... 略}); // 略 } } ```