THREE.ImageUtils は、既に古いメソッドですね。今は「ImageLoader」というクラスに変更されています。
バージョンが最新のr85であるならば、
CubeTextureLoader
と、
CubeTexture
が、必要な情報に近いでしょう。
さて、PreloadJSを使用した手法ですが、
1.テクスチャーリストを作成します。後のID指定で使うので、URLのみではなく、IDとURLの組み合わせのペアです。
2.ロードキューを作成
3.ロードキュー完了時に、ロードした画像を「1つずつ」抽出して、Textureの配列を作成する
4.実際のロード開始
という流れは変わりませんが、「3」の部分が重要になります。
js
1
2// 1.テクスチャーリストを作成
3var manifest = [
4 { id: '0', src: './tx/1.png'},
5 { id: '1', src: './tx/2.png'},
6 { id: '2', src: './tx/3.png'},
7 { id: '3', src: './tx/4.png'},
8 { id: '4', src: './tx/5.png'},
9 { id: '5', src: './tx/6.png'}
10];
11
12// ロードキューを作成
13var loadQueue = new createjs.LoadQueue();
14
15// textureの受け皿を用意
16var texture = new THREE.CubeTexture();
17
18// ロード完了を監視
19loadQueue.on('complete', function() {
20 // loadQueueからロードした画像データを取得
21 // もうちょっと良い方法があるかもしれませんね
22 var urls = [];
23 for(var i = 0 ; i < 6 ; i++) {
24 urls.push(loadQueue.getResult(i));
25 }
26
27 // three.jsで使えるテクスチャーに変換
28 texture.images = urls;
29
30 // 【重要】更新を許可
31 texture.needsUpdate = true;
32});
33
34
35// 4.テクスチャーのロードを開始
36loadQueue.loadManifest(manifest);
37
なお、これらは最新のr85ならば動作すると思いますが、それ以前(ImageUtilsが存在していたころ)では少し違うと思います。それでも、createjs.LoadQueueのレスポンスから1つずつ画像を抽出して、1つの配列画像にするという部分は変わらないと思います。
ご参考になれば幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/12 05:35
2017/06/12 07:39 編集
2017/06/13 14:43
2017/06/13 16:02
2017/06/14 14:21
2017/06/14 14:26