質問: new THREE.ImageUtils.loadTextureCube(urls); これを、こちらのページで紹介されているPreloadJSを使用し、 事前にテクスチャを読み込んだ後、textureCubeを生成できないか 調べています。 http://qiita.com/sawa-zen/items/cba55a23411753f1353e しかし、調べ方が良くないのか、loadTextureCubeで生成する方法しか 見つけられません。 どの様にすれば良いかご存じの方がいらっしゃいましたら、 ご教授下さい。よろしくお願いします。
回答: THREE.ImageUtils は、既に古いメソッドですね。今は「ImageLoader」というクラスに変更されています。 バージョンが最新のr85であるならば、 CubeTextureLoader と、 CubeTexture が、必要な情報に近いでしょう。 さて、PreloadJSを使用した手法ですが、 1.テクスチャーリストを作成します。後のID指定で使うので、URLのみではなく、IDとURLの組み合わせのペアです。 2.ロードキューを作成 3.ロードキュー完了時に、ロードした画像を「1つずつ」抽出して、Textureの配列を作成する 4.実際のロード開始 という流れは変わりませんが、「3」の部分が重要になります。 ``` // 1.テクスチャーリストを作成 var manifest = [ { id: '0', src: './tx/1.png'}, { id: '1', src: './tx/2.png'}, { id: '2', src: './tx/3.png'}, { id: '3', src: './tx/4.png'}, { id: '4', src: './tx/5.png'}, { id: '5', src: './tx/6.png'} ]; // ロードキューを作成 var loadQueue = new createjs.LoadQueue(); // textureの受け皿を用意 var texture = new THREE.CubeTexture(); // ロード完了を監視 loadQueue.on('complete', function() { // loadQueueからロードした画像データを取得 // もうちょっと良い方法があるかもしれませんね var urls = []; for(var i = 0 ; i < 6 ; i++) { urls.push(loadQueue.getResult(i)); } // three.jsで使えるテクスチャーに変換 texture.images = urls; // 【重要】更新を許可 texture.needsUpdate = true; }); // 4.テクスチャーのロードを開始 loadQueue.loadManifest(manifest); ``` なお、これらは最新のr85ならば動作すると思いますが、それ以前(ImageUtilsが存在していたころ)では少し違うと思います。それでも、createjs.LoadQueueのレスポンスから1つずつ画像を抽出して、1つの配列画像にするという部分は変わらないと思います。 ご参考になれば幸いです。