質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.93%

Three.js:PreloadJSで読み込んだテクスチャを使って環境マッピングをしたいです。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,709

score 21

いつも参考にさせていただいています。現在Three.jsについて勉強しておりますが、
PreloadJSの使い方について分からないことがあり質問させていただきます。

現在以下の様なコードで、ImageUtils.loadTextureCube()を使用して
6面のテクスチャを読み込み、その戻り値をマテリアルのenvMapパラメータ
に設定しています。

var urls = [];
for(var i = 1 ; i <= 6 ; i++) {
urls[i - 1] = 'tx/' + i + '.jpg';
}
var envMap = new THREE.ImageUtils.loadTextureCube(urls);

これを、こちらのページで紹介されているPreloadJSを使用し、
事前にテクスチャを読み込んだ後、textureCubeを生成できないか
調べています。

http://qiita.com/sawa-zen/items/cba55a23411753f1353e

しかし、調べ方が良くないのか、loadTextureCubeで生成する方法しか
見つけられません。

どの様にすれば良いかご存じの方がいらっしゃいましたら、 
ご教授下さい。よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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つの配列画像にするという部分は変わらないと思います。

ご参考になれば幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/14 01:02

    バージョンアップ前、のものを中心に見させていただきました。

    元(キューブマップが動いているもの)とソースを見比べると、マテリアル宣言後のテクスチャの割り当ての行が違っていますね。
    127行目、132行目、137行目などが、 

    map : envMap

    になっていますが、変更前は

    envMap : envMap

    だったはずです。 map : envMapだと、反射マップではなくメイン材質に適用しようとしてしまい、うまくいかない気がします。おそらく、envMap: envMap が正しいと思います。
    まずは、この3行を見直してみたらいかがでしょう?

    キャンセル

  • 2017/06/14 23:21

    adrs2002様

    できました!ご指摘の通りでした!!
    元のバージョンは取りあえず色々排除して、環境マッピングだけを追求しました。

    http://kimuraya-bakery.la.coocan.jp/kabuto/kabuto.html

    また、新しいバージョンも、adrs2002様のアドバイスを読み返しながら修正し、
    こちらもできました!

    http://kimuraya-bakery.la.coocan.jp/kabuto2/

    何度も、アドバイス下さり、本当にありがとうございました!!
    感謝です。

    キャンセル

  • 2017/06/14 23:26

    いろいろ混乱させてしまったようですみません(´-ω-`) ともあれ、解決できてよかったです!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る